From 6081781a5f36277683b61d1f355b85ae20795299 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Fri, 6 Mar 2026 22:44:11 +0000
Subject: [PATCH] Move communication to have more width for details.

---
 html/template/sync/communication-root.html | 72 +++++++++++-----------
 1 file changed, 35 insertions(+), 37 deletions(-)

diff --git a/html/template/sync/communication-root.html b/html/template/sync/communication-root.html
index d28bfe57..a7163305 100644
--- a/html/template/sync/communication-root.html
+++ b/html/template/sync/communication-root.html
@@ -461,53 +461,51 @@
 								:class="{ 'active': selectedReport && selectedReport.id === report.id }"
 								@click="selectReport(report)"
 							>
-								<div class="d-flex align-items-start">
-									<div class="me-3">
+								<!-- First row: icon, type badge, and time -->
+								<div
+									class="d-flex justify-content-between align-items-center mb-2"
+								>
+									<div class="d-flex align-items-center">
 										<template x-if="report.type === 'nuisance'">
 											<i
-												class="bi bi-exclamation-triangle-fill icon-nuisance fs-4"
+												class="bi bi-exclamation-triangle-fill icon-nuisance fs-4 me-2"
 											></i>
 										</template>
 										<template x-if="report.type === 'standing_water'">
 											<i
-												class="bi bi-droplet-fill icon-standing-water fs-4"
+												class="bi bi-droplet-fill icon-standing-water fs-4 me-2"
 											></i>
 										</template>
+										<span
+											class="badge"
+											:class="report.type === 'nuisance' ? 'bg-danger' : 'bg-info'"
+											x-text="report.type === 'nuisance' ? 'Nuisance' : 'Standing Water'"
+										></span>
 									</div>
-									<div class="flex-grow-1">
-										<div
-											class="d-flex justify-content-between align-items-center"
-										>
-											<span
-												class="badge"
-												:class="report.type === 'nuisance' ? 'bg-danger' : 'bg-info'"
-												x-text="report.type === 'nuisance' ? 'Nuisance' : 'Standing Water'"
-											>
-											</span>
-											<small
-												class="text-muted"
-												x-text="getRelativeTime(report.createdAt)"
-											></small>
-										</div>
-										<div class="mt-1">
-											<i class="bi bi-geo-alt text-muted"></i>
-											<span x-text="report.zipCode" class="fw-medium"></span>
-										</div>
-										<small
-											class="text-muted"
-											x-text="report.address.substring(0, 30) + '...'"
-										></small>
-										<div class="mt-1">
-											<template
-												x-if="report.photos && report.photos.length > 0"
-											>
-												<small class="text-muted">
-													<i class="bi bi-camera"></i>
-													<span x-text="report.photos.length"></span> photo(s)
-												</small>
-											</template>
-										</div>
+									<small
+										class="text-muted"
+										x-text="getRelativeTime(report.createdAt)"
+									></small>
+								</div>
+
+								<!-- Details section: full width -->
+								<div>
+									<div>
+										<i class="bi bi-geo-alt text-muted"></i>
+										<span x-text="report.zipCode" class="fw-medium"></span>
 									</div>
+									<small
+										class="text-muted"
+										x-text="report.address.substring(0, 30) + '...'"
+									></small>
+									<template x-if="report.photos && report.photos.length > 0">
+										<div class="mt-1">
+											<small class="text-muted">
+												<i class="bi bi-camera"></i>
+												<span x-text="report.photos.length"></span> photo(s)
+											</small>
+										</div>
+									</template>
 								</div>
 							</div>
 						</template>