fix: ensure map airport popups have a reasonable width

johanohly · Oct 20, 2024 · 7d2e80e · 7d2e80e
1 parent b752cf7
commit 7d2e80e
Showing 1 changed file with 50 additions and 48 deletions.
diff --git 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>