From 7d2e80e94311e6c2fb2b95a4920fa9ee12d2a6a3 Mon Sep 17 00:00:00 2001
From: Johan Ohly <johanohly@gmail.com>
Date: Sun, 20 Oct 2024 23:50:01 +0200
Subject: [PATCH] fix: ensure map airport popups have a reasonable width

---
 src/lib/components/map/Airports.svelte | 98 +++++++++++++-------------
 1 file changed, 50 insertions(+), 48 deletions(-)

diff --git a/src/lib/components/map/Airports.svelte b/src/lib/components/map/Airports.svelte
index d71d956..120f25e 100644
--- a/src/lib/components/map/Airports.svelte
+++ b/src/lib/components/map/Airports.svelte
@@ -36,57 +36,59 @@
   stroked
 >
   <Popup openOn="hover" anchor="top-left" offset={12} let:data>
-    <div class="flex flex-col px-3 pt-3">
-      <h3 class="font-thin text-muted-foreground">Airport</h3>
-      <h4 class="flex items-center text-lg">
-        <img
-          src="https://flagcdn.com/{data.meta.country.toLowerCase()}.svg"
-          alt={data.meta.country}
-          class="w-8 h-5 mr-2"
-        />
-        {data.meta.iata} - {data.meta.name}
-      </h4>
-    </div>
-    <div class="h-[1px] bg-muted my-3" />
-    <div class="grid grid-cols-[repeat(3,_1fr)] px-3">
-      <h4 class="font-semibold">
-        {data.departures}
-        <span class="font-thin text-muted-foreground"
-          >{pluralize(data.departures, 'departure')}</span
-        >
-      </h4>
-      <h4 class="font-semibold">
-        {data.arrivals}
-        <span class="font-thin text-muted-foreground"
-          >{pluralize(data.arrivals, 'arrival')}</span
-        >
-      </h4>
-      <h4 class="font-semibold">
-        {data.airlines.length}
-        <span class="font-thin text-muted-foreground"
-          >{pluralize(data.airlines.length, 'airline')}</span
-        >
-      </h4>
-    </div>
-    <div class="h-[1px] bg-muted my-3" />
-    <div class="px-3 pb-3">
-      <div class="grid grid-cols-[repeat(3,_1fr)]">
-        <h3 class="font-semibold">Route</h3>
-        <h3 class="font-semibold">Date</h3>
-        <h3 class="font-semibold">Airline</h3>
+    <div class="min-w-[18rem]">
+      <div class="flex flex-col px-3 pt-3">
+        <h3 class="font-thin text-muted-foreground">Airport</h3>
+        <h4 class="flex items-center text-lg">
+          <img
+            src="https://flagcdn.com/{data.meta.country.toLowerCase()}.svg"
+            alt={data.meta.country}
+            class="w-8 h-5 mr-2"
+          />
+          {data.meta.iata} - {data.meta.name}
+        </h4>
       </div>
-      {#each data.flights.slice(0, 5) as flight}
+      <div class="h-[1px] bg-muted my-3" />
+      <div class="grid grid-cols-[repeat(3,_1fr)] px-3">
+        <h4 class="font-semibold">
+          {data.departures}
+          <span class="font-thin text-muted-foreground"
+            >{pluralize(data.departures, 'departure')}</span
+          >
+        </h4>
+        <h4 class="font-semibold">
+          {data.arrivals}
+          <span class="font-thin text-muted-foreground"
+            >{pluralize(data.arrivals, 'arrival')}</span
+          >
+        </h4>
+        <h4 class="font-semibold">
+          {data.airlines.length}
+          <span class="font-thin text-muted-foreground"
+            >{pluralize(data.airlines.length, 'airline')}</span
+          >
+        </h4>
+      </div>
+      <div class="h-[1px] bg-muted my-3" />
+      <div class="px-3 pb-3">
         <div class="grid grid-cols-[repeat(3,_1fr)]">
-          <h4 class="font-thin">{flight.route}</h4>
-          <h4 class="font-thin">{flight.date}</h4>
-          <h4 class="font-thin">{flight.airline}</h4>
+          <h3 class="font-semibold">Route</h3>
+          <h3 class="font-semibold">Date</h3>
+          <h3 class="font-semibold">Airline</h3>
         </div>
-      {/each}
-      {#if data.flights.length > 5}
-        <h4 class="font-thin text-muted-foreground">
-          +{data.flights.length - 5} more
-        </h4>
-      {/if}
+        {#each data.flights.slice(0, 5) as flight}
+          <div class="grid grid-cols-[repeat(3,_1fr)]">
+            <h4 class="font-thin">{flight.route}</h4>
+            <h4 class="font-thin">{flight.date}</h4>
+            <h4 class="font-thin">{flight.airline}</h4>
+          </div>
+        {/each}
+        {#if data.flights.length > 5}
+          <h4 class="font-thin text-muted-foreground">
+            +{data.flights.length - 5} more
+          </h4>
+        {/if}
+      </div>
     </div>
   </Popup>
 </DeckGlLayer>