From b4b89fcd37aade281b278714d45e7d2b647cec5d Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 22 Oct 2025 09:04:41 -0500
Subject: [PATCH] Truncate long map hover captions

---
 src/place/PlaceEntity.tsx | 27 ++++++++++++++++-----------
 src/utility/size.ts       |  8 ++++----
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/place/PlaceEntity.tsx b/src/place/PlaceEntity.tsx
index c0faf85b..790bf30e 100644
--- a/src/place/PlaceEntity.tsx
+++ b/src/place/PlaceEntity.tsx
@@ -21,17 +21,22 @@ export default function PlaceEntity({
       hoverKey: place.id,
       content: <div className="relative">
         <PlaceMap {...{ place, width, height }} />
-        <span
-          className={clsx(
-            'absolute bottom-2.5 left-2.5',
-            'px-1.5 py-0.5 rounded-sm',
-            'text-white/90 bg-black/40 backdrop-blur-lg',
-            'outline-medium shadow-sm',
-            'uppercase text-[0.7rem]',
-          )}
-        >
-          {place.nameFormatted || place.name}
-        </span>
+        <div className={clsx(
+          'absolute bottom-2.5 left-2.5 right-2.5',
+          'flex',
+        )}>
+          <span
+            className={clsx(
+              'px-1.5 py-0.5 rounded-sm',
+              'text-white/90 bg-black/40 backdrop-blur-lg',
+              'outline-medium shadow-sm',
+              'uppercase text-[0.7rem]',
+              'truncate',
+            )}
+          >
+            {place.nameFormatted || place.name}
+          </span>
+        </div>
       </div>,
       className: 'inline-flex',
       width,
diff --git a/src/utility/size.ts b/src/utility/size.ts
index 53fa0c94..b7dadbc4 100644
--- a/src/utility/size.ts
+++ b/src/utility/size.ts
@@ -2,15 +2,15 @@ const DEFAULT_ASPECT_RATIO = 3.0 / 2.0;
 
 export const getDimensionsFromSize = (
   size: number,
-  aspectRatioRaw?: string | number,
+  _aspectRatio?: string | number,
 ): {
   width: number
   height: number
   aspectRatio: number
 } => {
-  const aspectRatio = typeof aspectRatioRaw === 'string'
-    ? parseFloat(aspectRatioRaw)
-    : aspectRatioRaw || DEFAULT_ASPECT_RATIO;
+  const aspectRatio = typeof _aspectRatio === 'string'
+    ? parseFloat(_aspectRatio)
+    : _aspectRatio || DEFAULT_ASPECT_RATIO;
 
   let width = size;
   let height = size;