From 2574ced672eb3533fae0d124c42d009a986efa6f Mon Sep 17 00:00:00 2001
From: Ian Gulliver <github@flamingcow.io>
Date: Sun, 16 Aug 2026 13:29:56 -0700
Subject: [PATCH] Restyle map popup: full-bleed photo, padded body, no close
 header

---
 web/static/directory/app.js    | 11 +++++++----
 web/static/directory/style.css | 18 +++++++++++++++---
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/web/static/directory/app.js b/web/static/directory/app.js
index 037574e..8d440dd 100644
--- a/web/static/directory/app.js
+++ b/web/static/directory/app.js
@@ -1734,13 +1734,15 @@ function renderMapPage() {
       img.alt = '';
       box.append(img);
     }
-    box.append(el('div', 'map-popup-name', family.name));
+    const body = el('div', 'map-popup-body');
+    body.append(el('div', 'map-popup-name', family.name));
     if (family.address) {
-      box.append(el('div', 'map-popup-sub', family.address));
+      body.append(el('div', 'map-popup-sub', family.address));
     }
     const link = el('a', 'map-popup-link', 'See family');
     link.href = familyLink(family.key);
-    box.append(link);
+    body.append(link);
+    box.append(body);
     return box;
   }
 
@@ -1782,7 +1784,8 @@ function renderMapPage() {
       streetViewControl: false,
       fullscreenControl: false,
     });
-    info = new google.maps.InfoWindow();
+    info = new google.maps.InfoWindow({headerDisabled: true});
+    map.addListener('click', () => info.close());
     const bounds = new google.maps.LatLngBounds();
     for (const family of Object.values(state.model.families)) {
       if (family.lat || family.lng) {
diff --git a/web/static/directory/style.css b/web/static/directory/style.css
index 245d5c6..31061b6 100644
--- a/web/static/directory/style.css
+++ b/web/static/directory/style.css
@@ -421,16 +421,28 @@ main {
   stroke-linejoin: round;
 }
 
+.gm-style .gm-style-iw-c {
+  padding: 0 !important;
+  border-radius: 14px;
+}
+
+.gm-style .gm-style-iw-d {
+  overflow: hidden !important;
+  padding: 0;
+}
+
 .map-popup {
-  max-width: 220px;
+  max-width: 260px;
   font-family: Inter, system-ui, sans-serif;
 }
 
 .map-popup-photo {
   width: 100%;
-  border-radius: 8px;
   display: block;
-  margin-bottom: 8px;
+}
+
+.map-popup-body {
+  padding: 12px 14px 14px;
 }
 
 .map-popup-name {