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. -
- - -
+ + + +
+ + + + + + onScopeChange("workbench")}> + {workbenchScope.title} + + onScopeChange("all")}> + All workbenches + + + +
+ ) : null} 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( + 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(