From 8dc388396f7a83c7dfd48b1321dc52b7f2625789 Mon Sep 17 00:00:00 2001
From: Sawyer <sawyer@dirtroad.dev>
Date: Thu, 3 Sep 2026 00:24:15 -0700
Subject: [PATCH 1/2] Add tests for Files scope below lg (CL-6473)

The scope toggle currently uses hidden lg:flex, so below 1024px there
is no way to reach All workbenches. Pin that at least one Files-scope
control stays in the document without the hidden class.
---
 apps/web/test/library-page-selection.test.tsx | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/apps/web/test/library-page-selection.test.tsx b/apps/web/test/library-page-selection.test.tsx
index a9f3753a2..983929ebe 100644
--- a/apps/web/test/library-page-selection.test.tsx
+++ b/apps/web/test/library-page-selection.test.tsx
@@ -350,6 +350,33 @@ describe("LibraryPage top-nav action placement", () => {
     );
   });
 
+  test("the files scope control stays in the document below the lg breakpoint", () => {
+    act(() => {
+      root.render(
+        <LibraryPage
+          artifacts={artifacts}
+          workbenchScope={{ title: "Launch plan" }}
+          scope="all"
+          onScopeChange={() => undefined}
+        />,
+      );
+    });
+    const topBarActions = container.querySelector(
+      '[data-testid="stage-top-bar-actions"]',
+    );
+    const scopeControls = [
+      ...(topBarActions?.querySelectorAll('[aria-label="Files scope"]') ?? []),
+    ];
+    expect(scopeControls.length).toBeGreaterThan(0);
+    // `hidden` is display:none. A Files-scope control that only exists
+    // behind `hidden lg:flex` vanishes below 1024px with no way to reach
+    // All workbenches. At least one control must stay in the tree without
+    // that class — the overflow menu in this bar, or the group itself.
+    expect(
+      scopeControls.some((el) => !el.className.split(/\s+/).includes("hidden")),
+    ).toBe(true);
+  });
+
   test("the file detail pane fills the available height", () => {
     act(() => {
       root.render(

From 3a5900569c4f60aa504f90f79c9995e7af8f4464 Mon Sep 17 00:00:00 2001
From: Sawyer <sawyer@dirtroad.dev>
Date: Thu, 3 Sep 2026 00:48:36 -0700
Subject: [PATCH 2/2] Keep Files scope reachable below lg (CL-6473)

The segmented group still lives in the StageTopBar actions slot at lg.
Below that breakpoint it no longer vanishes: an overflow menu in the
same slot keeps All workbenches reachable without a third All control.
---
 apps/web/src/pages/library-page.tsx | 79 +++++++++++++++++++----------
 1 file changed, 53 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/pages/library-page.tsx b/apps/web/src/pages/library-page.tsx
index 9d9674254..405ea64ad 100644
--- a/apps/web/src/pages/library-page.tsx
+++ b/apps/web/src/pages/library-page.tsx
@@ -480,33 +480,60 @@ export function LibraryPage({
             ) : null}
             {workbenchScope !== null && onScopeChange !== undefined ? (
               // One control, two states — answers exactly one question
-              // ("whose files"), styled as the bordered segmented group
-              // `ViewToggle` already uses for rows/grid in this same bar, so
-              // it reads as one control rather than two stray chips.
-              <div
-                role="group"
-                aria-label="Files scope"
-                className="hidden items-center gap-0.5 rounded-md border border-border p-0.5 lg:flex"
-              >
-                <Button
-                  type="button"
-                  size="sm"
-                  variant={scope === "workbench" ? "outline" : "ghost"}
-                  aria-pressed={scope === "workbench"}
-                  onClick={() => onScopeChange("workbench")}
+              // ("whose files"). At lg the bordered segmented group matches
+              // `ViewToggle` in this bar; below lg that group is hidden and
+              // the overflow menu in this same slot is the way to reach
+              // All workbenches.
+              <>
+                <div
+                  role="group"
+                  aria-label="Files scope"
+                  className="hidden items-center gap-0.5 rounded-md border border-border p-0.5 lg:flex"
                 >
-                  {workbenchScope.title}
-                </Button>
-                <Button
-                  type="button"
-                  size="sm"
-                  variant={scope === "all" ? "outline" : "ghost"}
-                  aria-pressed={scope === "all"}
-                  onClick={() => onScopeChange("all")}
-                >
-                  All workbenches
-                </Button>
-              </div>
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant={scope === "workbench" ? "outline" : "ghost"}
+                    aria-pressed={scope === "workbench"}
+                    onClick={() => onScopeChange("workbench")}
+                  >
+                    {workbenchScope.title}
+                  </Button>
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant={scope === "all" ? "outline" : "ghost"}
+                    aria-pressed={scope === "all"}
+                    onClick={() => onScopeChange("all")}
+                  >
+                    All workbenches
+                  </Button>
+                </div>
+                <div className="lg:hidden">
+                  <Menu>
+                    <MenuTrigger asChild>
+                      <Button
+                        type="button"
+                        size="sm"
+                        variant="ghost"
+                        aria-label="Files scope"
+                      >
+                        {scope === "all"
+                          ? "All workbenches"
+                          : workbenchScope.title}
+                      </Button>
+                    </MenuTrigger>
+                    <MenuContent align="end">
+                      <MenuItem onSelect={() => onScopeChange("workbench")}>
+                        {workbenchScope.title}
+                      </MenuItem>
+                      <MenuItem onSelect={() => onScopeChange("all")}>
+                        All workbenches
+                      </MenuItem>
+                    </MenuContent>
+                  </Menu>
+                </div>
+              </>
             ) : null}
             <Menu>
               <MenuTrigger asChild>