fix(web): keep sidebar wordmark visible at minimum width

[extoci]

What Changed

• Keep the “T3 Code” wordmark visible across the full legal desktop sidebar width range, including the 13rem minimum.
• Remove the redundant wordmark container-width query. The sidebar width contract already enforces the minimum.
• Keep the mobile wordmark hidden and preserve the wider responsive threshold for optional environment labels.
• Add focused regression coverage that connects desktop wordmark visibility to the sidebar minimum.

Why

At the 13rem sidebar minimum, the desktop sidebar border can leave the header query container slightly narrower than 13rem. As a result, both the original 13.5rem query and an exact 13rem query hide the wordmark on web, Windows (no traffic lights to account for), and macOS even though the wordmark still fits.

Showing the wordmark unconditionally inside the existing desktop media query avoids the border and fractional-rounding boundary. The optional environment label keeps its separate container query.

UI Changes

Before

Screen.Recording.2026-08-12.at.2.38.19.AM.mov

Afte

Screen.Recording.2026-08-12.at.2.41.59.AM.mov

Verification

• vp test run apps/web/src/components/threadSidebarWidth.test.ts apps/web/src/components/SidebarStageBackdrop.test.tsx — 14 tests passed
• vp run --filter @t3tools/web typecheck — passed

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

Generated with GPT-5.6-sol using the Codex harness in T3 Code.

---

Note

Low Risk
UI-only CSS visibility tweak plus a focused regression test; no auth, data, or layout contract changes beyond wordmark display.

Overview
Keeps the desktop T3 Code wordmark visible across the full legal sidebar width range, including the 13rem minimum.

Removes the redundant @container sidebar-header (min-width: 13.5rem) gate on .sidebar-brand, so the wordmark shows whenever the desktop media query applies. The optional stage label still uses its wider 15.75rem container threshold.

Adds a regression test that reads index.css and asserts brand visibility rules stay aligned with THREAD_SIDEBAR_MIN_WIDTH.

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

Note

Fix sidebar wordmark visibility at minimum width on desktop

Previously, .sidebar-brand was only shown when the sidebar-header container was at least 13.5rem wide, causing the wordmark to disappear at minimum sidebar widths. The fix removes the container-width gate and makes .sidebar-brand unconditionally display: flex within the @media (min-width: 48rem) desktop breakpoint. The .sidebar-brand-stage label remains gated by @container sidebar-header (min-width: 15.75rem). A new test in threadSidebarWidth.test.ts validates the CSS rules against THREAD_SIDEBAR_MIN_WIDTH.

^{Macroscope summarized 0c5a522.}

[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: 244484ef-258e-44cb-845b-97faa720def0

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

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[macroscopeapp]

Approvability

Verdict: Approved 0c5a522

This is a simple CSS fix removing a container query condition so the sidebar wordmark stays visible at minimum width. The change is purely visual with no runtime behavior impact, and includes test coverage for regression prevention.

^{You can customize Macroscope's approvability policy. Learn more.}