Repository navigation
fix(web-ui): keep welcome brand and tagline from overlapping - #3854
Merged
Merged
Conversation
The welcome scene switched its type scale with CSS container queries. When the scene first lays out narrow (behind the startup overlay or during a window resize) and then widens, WebKit resolves the container query inside layout and keeps the inline positions measured at the 16px tier while painting the brand at 32px, so "OpenBitFun" is drawn over the tagline. Derive the width tier from a ResizeObserver and expose it as a data-density attribute. The attribute change goes through ordinary style invalidation before layout, so the text is re-measured. Tier thresholds and per-tier sizes are unchanged.
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
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.
Summary
The welcome scene's brand line ("OpenBitFun，") and the typed tagline could intermittently overlap: the brand glyphs were painted at full size over the first characters of the tagline.
The scene's type scale is now selected by a
data-densityattribute driven by aResizeObserver, instead of CSS container queries. Breakpoints (560px / 400px) and per-tier font sizes, logo sizes and padding are unchanged.Type and Areas
Type: Bug fix
Areas: web UI (welcome scene)
Motivation / Impact
In the reported screenshot the space laid out for "OpenBitFun" is about half of the painted width, matching the 16px (
font-size-xl,@container (max-width: 400px)) to 32px (font-size-5xl) ratio. The scene can first lay out narrow (behind the startup overlay, or mid window resize) and then widen. WebKit resolves container queries inside layout and kept the inline run positions from the 16px tier while painting thewhite-space: prebrand text at 32px, so the tagline starts where the small text ended. It is timing dependent, hence intermittent.An attribute change goes through ordinary style invalidation before layout, so the brand and tagline are re-measured on every tier change. A zero width (hidden scene) keeps the last tier.
Verification
pnpm --dir src/web-ui run test:run src/app/scenes/welcome/WelcomeScene.test.tsx src/app/startup/startupOverlay.test.ts: 24 passed, including a new test for narrow -> wide tier switching, zero-width retention and observer disconnectpnpm run type-check:web: passedNot reproduced or rechecked in the macOS WKWebView desktop app. Layout-only change; no remote scenario behavior is affected.
Checklist