From 4a429c8c5940aaa9cb2579c2b6df909e1a9d7951 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Sat, 11 Apr 2026 00:30:49 +0200
Subject: [PATCH] Shrink day label pill and fix centering

Use absolute positioning with left:50% + translate(-50%) for proper
horizontal centering of auto-width content. Reduced font to 10px,
padding to 1px 6px, border-radius to 8px.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/planner/app/components/PlannerMap.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/planner/app/components/PlannerMap.tsx b/apps/planner/app/components/PlannerMap.tsx
index ee5368b..73a5c27 100644
--- a/apps/planner/app/components/PlannerMap.tsx
+++ b/apps/planner/app/components/PlannerMap.tsx
@@ -33,14 +33,15 @@ function waypointIcon(index: number, overnight?: boolean): L.DivIcon {
 function dayLabelIcon(dayNumber: number, distanceKm: string): L.DivIcon {
   return L.divIcon({
     className: "",
-    html: `<div style="
-      background:white;color:#1f2937;
-      padding:2px 8px;border-radius:12px;
-      font-size:11px;font-weight:600;white-space:nowrap;
-      box-shadow:0 1px 4px rgba(0,0,0,0.15);
-    ">Day ${dayNumber} · ${distanceKm} km</div>`,
-    iconSize: [120, 20],
-    iconAnchor: [60, 44],
+    html: `<div style="position:absolute;left:50%;transform:translate(-50%,-40px);">
+      <div style="
+        background:white;color:#1f2937;
+        padding:1px 6px;border-radius:8px;
+        font-size:10px;font-weight:600;white-space:nowrap;
+        box-shadow:0 1px 3px rgba(0,0,0,0.15);
+      ">Day ${dayNumber} · ${distanceKm} km</div>
+    </div>`,
+    iconSize: [0, 0],
   });
 }