Restyle map popup: full-bleed photo, padded body, no close header

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) {

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 {