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

Author: extoci

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);
+  });
 });

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) {