frontend: fix map stacking + honest infra error states #108

Merged
logan merged 1 commits from fix/frontend-map-and-error-states into main 2026-09-06 23:49:19 -04:00
Owner

From a live review of drb.cusano.net. Two Sonnet agents; changes are untypechecked (no node/npm in the authoring env) but presentational only — a CSS rule, two tile-URL constants, one string helper, one added error branch, a comment. next build in deploy.yml gates it.

Map (MapView.tsx, globals.css)

  • Account dropdown opened behind the Leaflet map on Live. .leaflet-container { position: relative; z-index: 0 } pins the map to its own stacking context — Leaflet's internal pane order intact, whole map drops below the sticky Nav + modal overlays. The map's own overlay UI (legend, rail, clock, fit-all) is outside .leaflet-container, unaffected. Chosen over raising Nav's z-index (would float the header over modal backdrops on ~7 pages).
  • Basemap: the "Dark" tile URL is already keyless CARTO dark, so prod's "API KEY REQUIRED" watermark is a stale build or CARTO rate-limiting the origin — not this code. Added NEXT_PUBLIC_MAP_TILE_URL build-time override + the OSM attribution keyless CARTO requires. Recommend also setting NEXT_PUBLIC_MAP_TILE_URL=https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png in the CI build env as the real fix.

Error states (incidents/page.tsx, alerts/page.tsx)

  • Both dumped raw Firestore "requires an index / PERMISSION_DENIED" strings (with a console.firebase URL) into the UI when the composite indexes aren't deployed (#13/#51). Now collapsed to a plain sentence; any other error passes through verbatim.
  • alerts also now surfaces the events-query error at all — it was swallowed, showing a false "No alerts triggered yet." on a public-safety screen.

onboarding/page.tsx: stale comment.

Separate issue filed with the full 15-item frontend punch-list from the audit.

🤖 Generated with Claude Code

From a live review of `drb.cusano.net`. Two Sonnet agents; changes are **untypechecked** (no node/npm in the authoring env) but presentational only — a CSS rule, two tile-URL constants, one string helper, one added error branch, a comment. `next build` in `deploy.yml` gates it. **Map (`MapView.tsx`, `globals.css`)** - Account dropdown opened *behind* the Leaflet map on Live. `.leaflet-container { position: relative; z-index: 0 }` pins the map to its own stacking context — Leaflet's internal pane order intact, whole map drops below the sticky Nav + modal overlays. The map's own overlay UI (legend, rail, clock, fit-all) is outside `.leaflet-container`, unaffected. Chosen over raising Nav's z-index (would float the header over modal backdrops on ~7 pages). - Basemap: the "Dark" tile URL is *already* keyless CARTO dark, so prod's "API KEY REQUIRED" watermark is a stale build or CARTO rate-limiting the origin — not this code. Added `NEXT_PUBLIC_MAP_TILE_URL` build-time override + the OSM attribution keyless CARTO requires. **Recommend also setting `NEXT_PUBLIC_MAP_TILE_URL=https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png` in the CI build env as the real fix.** **Error states (`incidents/page.tsx`, `alerts/page.tsx`)** - Both dumped raw Firestore "requires an index / PERMISSION_DENIED" strings (with a `console.firebase` URL) into the UI when the composite indexes aren't deployed (#13/#51). Now collapsed to a plain sentence; any other error passes through verbatim. - `alerts` also now surfaces the events-query error *at all* — it was swallowed, showing a false "No alerts triggered yet." on a public-safety screen. `onboarding/page.tsx`: stale comment. Separate issue filed with the full 15-item frontend punch-list from the audit. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
logan added 1 commit 2026-09-06 23:44:02 -04:00
From a live review of drb.cusano.net.

MapView.tsx / globals.css:
- The Leaflet map painted above the sticky Nav (z-40) and modal overlays, so
  on Live the account dropdown opened *behind* the map. Pin .leaflet-container
  to its own stacking context (position:relative; z-index:0) — keeps Leaflet's
  internal pane order, drops the whole map below app chrome. The map's own
  overlay UI (legend, rail, clock, fit-all) is outside .leaflet-container and
  unaffected. Chosen over raising Nav's z-index, which would float the sticky
  header over modal backdrops on ~7 pages.
- Basemap: the "Dark" tile URL is already CARTO's keyless dark raster (so a
  prod "API KEY REQUIRED" watermark is a stale build or CARTO rate-limiting
  the origin, not this code). Add NEXT_PUBLIC_MAP_TILE_URL as a build-time
  override so a keyed style drops in without a code change; add the OSM
  attribution the keyless CARTO tiles require.

incidents/page.tsx, alerts/page.tsx:
- Both dumped raw Firestore "requires an index / PERMISSION_DENIED" strings
  (with a console.firebase URL) straight into the UI when the composite
  indexes aren't deployed (server-26 #13/#51). Collapse those known infra
  failures to a plain sentence; any other error passes through verbatim so a
  real bug still shows. alerts also now surfaces the events-query error at
  all — it was swallowed, showing a false "No alerts triggered yet." on a
  public-safety screen.

onboarding/page.tsx: stale comment (/dashboard -> "/").

Untypechecked (no node/npm locally); presentational only — one string
helper, one added error branch, a CSS rule, two tile-URL constants, a
comment. next build in deploy.yml gates it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
logan merged commit c1c3e89e1d into main 2026-09-06 23:49:19 -04:00
Sign in to join this conversation.