Stray unstyled clock overlay + incident-card/zoom-control collision on the Leaflet map #118

Closed
opened 2026-09-07 18:39:42 -04:00 by logan · 1 comment
Owner

Live audit 2026-09-07, Version 5C/UI_AUDIT_0907b.md findings 4 & 5.

  1. Stray clock. A bare digital clock (18:37:23) renders bottom-left of the Leaflet map on both / (Live) and /incidents/[id] — no label, no container styling, no purpose visible to the user. Looks like a leftover debug <Clock/> or a mislabeled "last updated" element. Remove it, or give it a label + styling if it is meant to be a data-freshness indicator.
  2. Overlay collision. The floating incident mini-card (top-left of the map, e.g. "Alarm Activation at 24-26 Ann...") is z-ordered on top of the leaflet +/-/fullscreen controls and the severity legend. Offset it or move it to a free corner.

Both are components/MapView.tsx / its overlay children. Relates to #109 (P3 polish).

Live audit 2026-09-07, `Version 5C/UI_AUDIT_0907b.md` findings 4 & 5. 1. **Stray clock.** A bare digital clock (`18:37:23`) renders bottom-left of the Leaflet map on both `/` (Live) and `/incidents/[id]` — no label, no container styling, no purpose visible to the user. Looks like a leftover debug `<Clock/>` or a mislabeled "last updated" element. Remove it, or give it a label + styling if it is meant to be a data-freshness indicator. 2. **Overlay collision.** The floating incident mini-card (top-left of the map, e.g. "Alarm Activation at 24-26 Ann...") is z-ordered on top of the leaflet `+`/`-`/fullscreen controls and the severity legend. Offset it or move it to a free corner. Both are `components/MapView.tsx` / its overlay children. Relates to #109 (P3 polish).
Author
Owner

Fixed on branch fix/118-map-overlays (commit 52edbf1), local only — not pushed. All three changes are in components/MapView.tsx.

1. Stray clock — deleted. It was a live wall-clock: a clockStr state seeded from new Date().toLocaleTimeString(...) plus a 1s setInterval re-rendering it, drawn bottom-left. Not a data-freshness indicator — freshness is already covered by the separate top-center ● Live · {ago} badge, which is left alone. The clock told the user nothing the OS taskbar doesn't, so the state, its setInterval effect, and the render block are all removed.

2. Overlay collision — repositioned + bounded. The desktop incident rail moved from top-[8rem] (flush against the fit-all button and the zoom stack) to top-[9.5rem], ~90px down so it clears the Leaflet +/− controls and the fit-all button. Dropped the full-height bottom-[4.5rem] anchor for max-h-[calc(100%-12rem)] plus inner overflow-y-auto min-h-0, so the rail is only as tall as its content (capped) and scrolls itself — it can no longer run down over the bottom-right legend. Wrapper is now pointer-events-none with pointer-events-auto restored on the notice box and the card list, so the map still pans in the gaps beside the cards. Legend also got max-h-[calc(100%-4rem)] overflow-y-auto as a guard for the short (352px) map on /incidents/[id].

3. Tile fallback. The process.env.NEXT_PUBLIC_MAP_TILE_URL read already existed. Changed the || fallback from the CARTO keyless dark raster to https://tile.openstreetmap.org/{z}/{x}/{y}.png, and MAP_TILE_ATTRIBUTION to the static &copy; OpenStreetMap contributors. {z}/{x}/{y} left literal for Leaflet. Prod still overrides via the env var (CI build-arg on the #117 branch); this just makes the missing-var case render a real map instead of blank tiles.

No local tsc/npm here — reviewed types by hand (the removed state has no remaining references); CI next build is the real gate.

Fixed on branch `fix/118-map-overlays` (commit 52edbf1), local only — not pushed. All three changes are in `components/MapView.tsx`. **1. Stray clock — deleted.** It was a live wall-clock: a `clockStr` state seeded from `new Date().toLocaleTimeString(...)` plus a 1s `setInterval` re-rendering it, drawn bottom-left. Not a data-freshness indicator — freshness is already covered by the separate top-center `● Live · {ago}` badge, which is left alone. The clock told the user nothing the OS taskbar doesn't, so the state, its `setInterval` effect, and the render block are all removed. **2. Overlay collision — repositioned + bounded.** The desktop incident rail moved from `top-[8rem]` (flush against the fit-all button and the zoom stack) to `top-[9.5rem]`, ~90px down so it clears the Leaflet `+`/`−` controls and the fit-all button. Dropped the full-height `bottom-[4.5rem]` anchor for `max-h-[calc(100%-12rem)]` plus inner `overflow-y-auto min-h-0`, so the rail is only as tall as its content (capped) and scrolls itself — it can no longer run down over the bottom-right legend. Wrapper is now `pointer-events-none` with `pointer-events-auto` restored on the notice box and the card list, so the map still pans in the gaps beside the cards. Legend also got `max-h-[calc(100%-4rem)] overflow-y-auto` as a guard for the short (352px) map on `/incidents/[id]`. **3. Tile fallback.** The `process.env.NEXT_PUBLIC_MAP_TILE_URL` read already existed. Changed the `||` fallback from the CARTO keyless dark raster to `https://tile.openstreetmap.org/{z}/{x}/{y}.png`, and `MAP_TILE_ATTRIBUTION` to the static `&copy; OpenStreetMap contributors`. `{z}/{x}/{y}` left literal for Leaflet. Prod still overrides via the env var (CI build-arg on the #117 branch); this just makes the missing-var case render a real map instead of blank tiles. No local `tsc`/`npm` here — reviewed types by hand (the removed state has no remaining references); CI `next build` is the real gate.
logan closed this issue 2026-09-07 19:06:31 -04:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: logan/server-26#118