From 9c56f148e4a9c42b7813f2e54ff5cf2e2c31597f Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Sun, 22 Mar 2026 06:40:31 +0000
Subject: [PATCH] Fix a bunch of styles on communications page

---
 ts/components/CommunicationColumnAction.vue |  6 ++
 ts/components/CommunicationColumnDetail.vue | 71 ++++++++++++++++-----
 ts/components/CommunicationColumnList.vue   |  4 ++
 ts/components/PhotoViewerModal.vue          |  5 ++
 ts/view/Communication.vue                   | 61 +-----------------
 5 files changed, 72 insertions(+), 75 deletions(-)

diff --git a/ts/components/CommunicationColumnAction.vue b/ts/components/CommunicationColumnAction.vue
index bd066c9b..773b0ef5 100644
--- a/ts/components/CommunicationColumnAction.vue
+++ b/ts/components/CommunicationColumnAction.vue
@@ -1,3 +1,9 @@
+<style scoped>
+.actions-panel {
+	height: 100%;
+	overflow-y: auto;
+}
+</style>
 <template>
 	<div class="border-start p-0">
 		<div v-if="loading" class="loading">Loading...</div>
diff --git a/ts/components/CommunicationColumnDetail.vue b/ts/components/CommunicationColumnDetail.vue
index e67c7d9b..dc6e0e51 100644
--- a/ts/components/CommunicationColumnDetail.vue
+++ b/ts/components/CommunicationColumnDetail.vue
@@ -1,21 +1,62 @@
+<style scoped>
+.badge-larvae {
+	background-color: #ffc107;
+	color: #000;
+}
+
+.badge-pupae {
+	background-color: #fd7e14;
+	color: #fff;
+}
+
+.badge-adult {
+	background-color: #dc3545;
+	color: #fff;
+}
+.details-section {
+	overflow-y: auto;
+}
+.icon-standing-water {
+	color: #0dcaf0;
+}
+
+.icon-nuisance {
+	color: #dc3545;
+}
+.map-container {
+	height: 400px;
+	width: 100%;
+}
+.photo-thumbnail {
+	width: 100px;
+	height: 100px;
+	object-fit: cover;
+	cursor: pointer;
+	border-radius: 4px;
+	transition: transform 0.2s;
+}
+.photo-thumbnail:hover {
+	transform: scale(1.05);
+}
+</style>
+
 <template>
+	<div class="p-3">
+		<div class="map-container">
+			<MapMultipoint
+				id="map"
+				ref="mapRef"
+				:organization-id="user.organization.id"
+				:tegola="user.urls.tegola"
+				:xmin="user.organization.service_area?.min.x ?? 0"
+				:ymin="user.organization.service_area?.min.y ?? 0"
+				:xmax="user.organization.service_area?.max.x ?? 0"
+				:ymax="user.organization.service_area?.max.y ?? 0"
+			/>
+		</div>
+	</div>
 	<div v-if="loading" class="loading">Loading...</div>
 	<div v-else>
-		<div class="p-3">
-			<div class="map-container">
-				<MapMultipoint
-					id="map"
-					ref="mapRef"
-					:organization-id="user.organization.id"
-					:tegola="user.urls.tegola"
-					:xmin="user.organization.service_area?.min.x ?? 0"
-					:ymin="user.organization.service_area?.min.y ?? 0"
-					:xmax="user.organization.service_area?.max.x ?? 0"
-					:ymax="user.organization.service_area?.max.y ?? 0"
-				/>
-			</div>
-		</div>
-
 		<div
 			v-if="!selectedCommunication"
 			class="d-flex flex-column align-items-center justify-content-center text-muted"
diff --git a/ts/components/CommunicationColumnList.vue b/ts/components/CommunicationColumnList.vue
index 284a9941..b4a0f6a5 100644
--- a/ts/components/CommunicationColumnList.vue
+++ b/ts/components/CommunicationColumnList.vue
@@ -12,6 +12,10 @@
 	background-color: $primary;
 	color: white;
 }
+.reports-list {
+	overflow-y: auto;
+	max-height: 100vh;
+}
 </style>
 
 <template>
diff --git a/ts/components/PhotoViewerModal.vue b/ts/components/PhotoViewerModal.vue
index 010197d9..c66bce95 100644
--- a/ts/components/PhotoViewerModal.vue
+++ b/ts/components/PhotoViewerModal.vue
@@ -1,3 +1,8 @@
+<style scoped>
+.modal.show {
+	background-color: rgba(0, 0, 0, 0.5);
+}
+</style>
 <template>
 	<div
 		class="modal fade"
diff --git a/ts/view/Communication.vue b/ts/view/Communication.vue
index c1825d5e..950129e9 100644
--- a/ts/view/Communication.vue
+++ b/ts/view/Communication.vue
@@ -1,64 +1,5 @@
-<style scoped>
-/* Add your component-specific styles here */
-.reports-list {
-	overflow-y: auto;
-	max-height: 100vh;
-}
+<style scoped></style>
 
-.map-container {
-	height: 400px;
-	width: 100%;
-}
-
-.photo-thumbnail {
-	width: 100px;
-	height: 100px;
-	object-fit: cover;
-	cursor: pointer;
-	border-radius: 4px;
-	transition: transform 0.2s;
-}
-
-.photo-thumbnail:hover {
-	transform: scale(1.05);
-}
-
-.details-section {
-	overflow-y: auto;
-}
-
-.actions-panel {
-	height: 100%;
-	overflow-y: auto;
-}
-
-.badge-larvae {
-	background-color: #ffc107;
-	color: #000;
-}
-
-.badge-pupae {
-	background-color: #fd7e14;
-	color: #fff;
-}
-
-.badge-adult {
-	background-color: #dc3545;
-	color: #fff;
-}
-
-.icon-standing-water {
-	color: #0dcaf0;
-}
-
-.icon-nuisance {
-	color: #dc3545;
-}
-
-.modal.show {
-	background-color: rgba(0, 0, 0, 0.5);
-}
-</style>
 <template>
 	<ThreeColumn>
 		<template #left>