fix(zoom) desktop chrome clearance under text zoom#1490
Open
tellaho wants to merge 4 commits into
Open
Conversation
…xt zoom The top-chrome nav row cleared the native close/minimize/maximize buttons with rem-based padding (pl-20 / pl-8), so shrinking text with Cmd-minus scaled the clearance down (5rem -> 60px at 0.75) and slid the sidebar/back/forward buttons under the fixed-size traffic lights. The native controls do not scale with the app's text zoom, so this is one of the rare documented exceptions to the rem-first rule: the clearance is now pl-[80px] / pl-[32px] fixed px. Adds an e2e spec covering both the default zoom and the 0.75 min-zoom collision case (verified red against the old rem-based padding). Co-authored-by: Taylor Ho <taylorkmho@gmail.com> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
The nav buttons beside the macOS traffic lights were sized with rem (h-7 w-7, size-4 glyphs), so Cmd+ text zoom grew them visibly larger than the fixed-size native controls (42px box at 1.5 scale). Pin the button box and glyph to 28px/16px fixed px — the same documented chrome exception as the clearance padding — so the row always matches the traffic-light band. Extends the zoom-clearance e2e to assert a fixed 28px button box at default, 0.75, and 1.5 text scales (verified red against the old rem sizing). Co-authored-by: Taylor Ho <taylorkmho@gmail.com> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
tellaho
changed the title
The grabber/drag strip hosting the top-left nav buttons was sized by the --buzz-top-chrome-height token with a 2.5rem fallback, so Cmd +/- text zoom ballooned the bar to 60px (1.5) or collapsed it to 30px (0.75) around the now-fixed-size buttons. Pin the token default and the Tailwind fallbacks to 40px (== 2.5rem at default zoom) in chromeLayout.ts and the WorkspaceRail top inset — the same documented macOS chrome exception, one layer up. Extends the zoom-clearance e2e to assert a fixed 40px bar height at default, 0.75, and 1.5 text scales (verified red against the old rem token). Workspace-rail and chrome-backdrop consumers re-checked green. Co-authored-by: Taylor Ho <taylorkmho@gmail.com> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Keep main's separate, narrower HISTORY_ICON_BUTTON_CLASS for back/forward but pin both chrome button classes to fixed px (h-[28px], w-[28px]/w-[24px], size-[16px]) so the row holds its size beside the native traffic lights under Cmd +/- text zoom. Zoom-clearance spec updated to assert the 24px history-button width alongside the 28px sidebar toggle. Co-authored-by: Taylor Ho <taylorkmho@gmail.com> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
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
1 participant
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.
Category: fix
User Impact: The macOS window controls and Buzz’s top-left chrome controls stay visually aligned when app text is zoomed in or out.
Problem: Buzz was using rem-based chrome sizing for macOS-only window-control clearance. Text zoom changed Buzz’s chrome geometry while the native macOS close/minimize/maximize buttons stay fixed-size, causing overlap at zoom-out and an oversized/collapsed grabber band across zoom levels.
Solution: Keep the macOS chrome clearance, top-left nav button box, glyph size, and top grabber/drag bar height in fixed pixels. This is a deliberate, documented exception to the rem-first rule because it mirrors native macOS chrome’s fixed geometry.
Screenshot verification
Marge measured the rendered geometry at 0.75 / 1.0 / 1.5 text zoom: grabber bar 40px, button box 28×28, glyph 16×16 at every zoom level.
File changes
desktop/src/app/AppTopChrome.tsx
Switches the macOS traffic-light clearance and top-left control sizing from rem-based spacing to fixed pixel spacing, with inline comments explaining why this chrome-specific case should not scale with text zoom.
desktop/src/app/chromeLayout.ts
Pins the shared top-chrome height token to
40px, so the grabber/drag bar and divider position stay fixed across text zoom.desktop/src/app/WorkspaceRail.tsx
Keeps the workspace rail top inset fallback aligned with the fixed top-chrome height token.
desktop/tests/e2e/top-chrome-zoom-clearance.spec.ts
Adds coverage that spoofs macOS and verifies fixed traffic-light clearance, fixed button/glyph sizing, and fixed 40px grabber-bar height at zoom-out, default, and zoom-in text scales.
desktop/playwright.config.ts
Includes the top-chrome zoom-clearance spec in the smoke Playwright project so the regression stays covered.
Reproduction Steps