Fix illegible 2D panel text after closing the 3D temporal view#47
Merged
Conversation
The lazily-loaded TemporalView imports temporal.css, which Vite injects
globally on first open and never removes on unmount. Its `body { color:
#e6edf3 }` rule therefore persisted after the 3D view was closed, and —
since the 2D app sets its text colour only on :root (inherited) — the
near-white body colour overrode it, turning the side-panel text illegible.
Move the dark background/colour/font onto `.temporal-root` (fixed, inset:0,
and the ancestor of every temporal control), so the theme only applies while
the view is mounted and disappears with it. The standalone temporal3d.html
gets its own body background so it keeps its dark chrome with no flash.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Open the 3D temporal view, then close it: the text on the 2D map's side panels turns near-white and becomes illegible.
Root cause
TemporalViewis lazy-loaded (App.tsx) and importstemporal.css. Vite injects that stylesheet into the document<head>the first time the view opens — and never removes it on unmount (this is how ESM/Vite CSS imports behave; the<style>/<link>lives for the page's lifetime).temporal.csscontained a global rule:The 2D app (
app.css) sets its text colour only on:root(color: var(--ink)), which is an inherited value. The leakedbody { color: #e6edf3 }sets the colour directly on<body>, overriding the inherited dark colour for every panel element that doesn't declare its own → illegible near-white text.Fix
Move the dark theme (
background/color/font) off the globalbodyselector onto.temporal-root:.temporal-rootisposition: fixed; inset: 0, so it fills the viewport exactly as before — the in-app and standalone (temporal3d.html) views look identical..temporal-root, so they still inherit the light text colour..temporal-rootonly exists while the view is mounted, so closing it removes the styling entirely — nothing leaks into the 2D app.The standalone
temporal3d.htmlgets its own page-localbodybackground so it keeps its dark chrome (and avoids a load flash); being a separate HTML entry, it can't leak into the 2D app.Verification
npm run typecheck,npm run lint,npm run test:run(139 passed) andnpm run buildall pass.https://claude.ai/code/session_01RW3REtky9hbgJRDwSVw1h3
Generated by Claude Code