fix(web): keep environment pill inside narrow sidebar

[Neel2107]

What Changed

• Keep the T3 wordmark and environment pill inside a shared titlebar-safe container.
• Hide only the “Code” label when the sidebar is too narrow.
• Tighten the spacing around the pill and prevent header content from crossing the sidebar boundary.

Why

When Environment identification is set to Version pill, resizing the sidebar to its minimum width can push the Dev or Nightly pill into the main page header.

The Nightly label makes the problem especially visible because it is wider. The header should preserve the T3 wordmark and environment pill at every supported sidebar width.

Fixes #8660

UI Changes

Before

header-before.mov

After

Screen.Recording.2026-08-29.at.9.22.50.PM.mov

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Built with GPT-5.6 Sol in T3 Code through the Codex harness.

---

Note

Low Risk
CSS-only sidebar header layout and responsive label visibility; no auth, data, or API changes.

Overview
Fixes environment identification pills (e.g. Dev/Nightly) overflowing into the main header when the sidebar is at minimum width.

Sidebar header layout wraps the T3 brand link and environment pill in a single flex row with min-w-0 flex-1, moves the desktop titlebar left inset to that wrapper, and keeps the pill shrink-0 with slightly tighter padding and md:ml-auto so both stay within the sidebar.

Brand label behavior drops the per-link titlebar margin and hides the “Code” text by default on non-backdrop headers, showing it only when the header container is at least 15rem wide (@[15rem]/sidebar-header), while the wordmark and pill remain visible at all supported widths.

^{Reviewed by Cursor Bugbot for commit 24b2d39. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix environment pill overflow in narrow sidebar header

• Wraps SidebarBrand and the environment pill Badge in a new flex container with min-w-0 so the pill stays inside the sidebar on narrow widths instead of overflowing
• Right-aligns the pill at md+ breakpoints (md:ml-auto) and trims its horizontal padding (px-1.5 → px-1)
• Hides the brand label text below a 15rem container-query breakpoint (@[15rem]/sidebar-header:inline), except on backdrop where it stays visible
• Moves z-10, shrink-0, and left-margin spacing off the individual children onto the wrapper div
• Behavioral Change: brand label is now invisible on sidebars narrower than 15rem (was always visible); reviewers should confirm the collapsed/collapsed-icon sidebar still reads correctly at that width

^{Macroscope summarized 24b2d39.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 2a8e5787-8add-4752-ade4-fded9082ef6d

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

One regression found: overflow-hidden on SidebarHeader clips the stage backdrop art that intentionally bleeds below the header.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the new header wrapper: its overflow-hidden clips the brand link's focus ring. Details inline.

Non-blocking observation: because SidebarBrand is hidden below md, ml-auto on the badge also right-aligns the pill in the mobile sheet header (--sidebar-width: calc(100vw - …)), where it previously sat next to the trigger and could not overflow. If that relocation isn't intended, md:ml-auto keeps the mobile placement while still right-aligning on desktop.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: the new wrapper's overflow-hidden clips the brand link's focus-visible ring. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is a focused production sidebar layout fix, but the new flex wrapper may clip the brand link’s visible keyboard focus ring because of overflow-hidden. That accessibility regression should be resolved or verified before merging.

^{You can add or adjust custom eligibility rules. Learn more.}