Truncate long map hover captions

src/place/PlaceEntity.tsx

@@ -21,17 +21,22 @@ export default function PlaceEntity({
       hoverKey: place.id,
       content: <div className="relative">
         <PlaceMap {...{ place, width, height }} />
-        <span
+        <div className={clsx(
-          className={clsx(
+          'absolute bottom-2.5 left-2.5 right-2.5',
-            'absolute bottom-2.5 left-2.5',
+          'flex',
-            'px-1.5 py-0.5 rounded-sm',
+        )}>
-            'text-white/90 bg-black/40 backdrop-blur-lg',
+          <span
-            'outline-medium shadow-sm',
+            className={clsx(
-            'uppercase text-[0.7rem]',
+              'px-1.5 py-0.5 rounded-sm',
-          )}
+              'text-white/90 bg-black/40 backdrop-blur-lg',
-        >
+              'outline-medium shadow-sm',
-          {place.nameFormatted || place.name}
+              'uppercase text-[0.7rem]',
-        </span>
+              'truncate',
+            )}
+          >
+            {place.nameFormatted || place.name}
+          </span>
+        </div>
       </div>,
       className: 'inline-flex',
       width,

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'
+  const aspectRatio = typeof _aspectRatio === 'string'
-    ? parseFloat(aspectRatioRaw)
+    ? parseFloat(_aspectRatio)
-    : aspectRatioRaw || DEFAULT_ASPECT_RATIO;
+    : _aspectRatio || DEFAULT_ASPECT_RATIO;
 
   let width = size;
   let height = size;