trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Shrink day label pill and fix centering

Browse source 
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>
This commit is contained in:
Ullrich Schäfer 2026-04-11 00:30:49 +02:00
parent 83a416b6c9
commit 4a429c8c59
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
1 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

17
apps/planner/app/components/PlannerMap.tsx
View file

@ -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],
});
}