fix(web): unify header/navbar chrome across picker + v2 pages#76
Merged
Conversation
…h, collapse to one row The picker (daemon/web/server.ts) and the v2 auth pages (v2/web/layout.ts) each hand-copied their own header + #nav-toggle + drawer CSS, and had already drifted independently. Both had the same crosstalk-family bugs: the hamburger's #1c2128 background sat on a header with no background at all (floating-chip look), the hamburger carried a redundant border, and the header wrapped to multiple rows on narrow phones because it crammed brand+host+page-title (+ live-status+version in the picker) into one or two flex children with no truncation. Extract the fix into one shared module — src/shared/web/header.ts (headerCss/drawerCss/renderHeader) — so the two can't drift again: - header now gets the SAME background+border as the hamburger button - the hamburger's border is gone - header collapses to a single non-wrapping row: brand + ellipsis- truncated page title, with any trailing status (the picker's live/ stale/error dot) pinned at the end via flex:0 0 auto - host name + version dropped from the masthead (both already shown in the nav drawer's nav-host / nav-footer) so there's nothing to truncate away in practice Verified: typecheck + build clean, and visually via the real headerCss/drawerCss/renderHeader output plus pageShell() (v2 pages render directly; the picker's pickerPage() isn't exported and reads live tmux state, so its header was verified via a snapshot built from the real shared-module output). One row holds even under a deliberately long hostname, since host is no longer in the masthead at all. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Au8T9RPCb6wbgiEecQrBfZ
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.
Summary
cordfuse/crosstalktoday, applied here: the hamburger's#1c2128background sat on a header with no background (floating-chip look), the hamburger had a redundant border, and the header wrapped to 2-3 rows on narrow phones (brand+host+page-title+live-status+version crammed into flex children with no truncation).server.tsand v2'slayout.ts) that had already drifted from each other — extracted both into one shared module,src/shared/web/header.ts, so they can't drift again.flex:0 0 auto), background matches the hamburger, hamburger border removed. Host name + version dropped from the masthead (both already shown in the nav drawer).Test plan
npm run typecheckcleannpm run build(tsup) cleanaccount, a deliberately long-hostname case) rendered directly via the real, exportedpageShell()headerCss()/drawerCss()/renderHeader()output (pickerPage()itself isn't exported and reads live tmux state, so it wasn't safe to execute directly for a screenshot).stale/.errorrefresh-dot color states untouched🤖 Generated with Claude Code
https://claude.ai/code/session_01Au8T9RPCb6wbgiEecQrBfZ