diff --git a/apps/web/src/components/threadSidebarWidth.test.ts b/apps/web/src/components/threadSidebarWidth.test.ts index 12aef63bd5e..3beb2a8f513 100644 --- a/apps/web/src/components/threadSidebarWidth.test.ts +++ b/apps/web/src/components/threadSidebarWidth.test.ts @@ -1,3 +1,6 @@ +// @effect-diagnostics nodeBuiltinImport:off - Regression coverage compares shipped CSS with the sidebar width contract. +import * as NodeFS from "node:fs"; + import { describe, expect, it } from "vite-plus/test"; import { @@ -31,4 +34,22 @@ describe("thread sidebar width", () => { it("keeps the sidebar minimum when the whole layout is narrower than its minimums", () => { expect(resolveInitialThreadSidebarWidth(900, 700)).toBe(THREAD_SIDEBAR_MIN_WIDTH); }); + + it("shows the desktop wordmark across the sidebar's full legal width range", () => { + const sidebarStyles = NodeFS.readFileSync(new URL("../index.css", import.meta.url), "utf8"); + const desktopHeaderStyles = sidebarStyles.slice( + sidebarStyles.indexOf("@media (min-width: 48rem)"), + sidebarStyles.indexOf("/* Stage-channel sidebar art"), + ); + const stageLabelThreshold = desktopHeaderStyles.match( + /@container sidebar-header \(min-width: ([\d.]+)rem\) \{\s*\.sidebar-brand-stage \{\s*display: inline-flex;/, + )?.[1]; + + expect(sidebarStyles).toMatch(/\.sidebar-brand \{\s*display: none;/); + expect(desktopHeaderStyles).toMatch( + /@media \(min-width: 48rem\) \{\s*\.sidebar-brand \{\s*display: flex;/, + ); + expect(THREAD_SIDEBAR_MIN_WIDTH).toBe(13 * 16); + expect(Number(stageLabelThreshold) * 16).toBeGreaterThan(THREAD_SIDEBAR_MIN_WIDTH); + }); }); diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 76e77a4f396..340a94d00c4 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -340,10 +340,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil } @media (min-width: 48rem) { - @container sidebar-header (min-width: 13.5rem) { - .sidebar-brand { - display: flex; - } + .sidebar-brand { + display: flex; } @container sidebar-header (min-width: 15.75rem) {