fix(studio): stop the chrome bars overlapping on phone viewports

src/studio/__tests__/Toolbar.mobile.test.tsx

@@ -0,0 +1,99 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2026 Andrii Shylenko and kernelCAD contributors
+/** @vitest-environment happy-dom */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { Toolbar } from '../Toolbar';
+
+vi.mock('@tanstack/react-router', () => ({ useNavigate: () => vi.fn() }));
+vi.mock('../../funnel/hooks/useSession', () => ({
+    useOptionalSession: () => ({ session: { user: { email: 'a@b.c' } }, loading: false }),
+}));
+vi.mock('../../funnel/lib/apiClient', () => ({ saveProject: vi.fn() }));
+
+/** Force the narrow-viewport branch (`(max-width: 767px)` matches). */
+function setNarrow(narrow: boolean) {
+    Object.defineProperty(window, 'matchMedia', {
+        configurable: true,
+        writable: true,
+        value: (query: string) => ({
+            matches: narrow,
+            media: query,
+            addEventListener: () => {},
+            removeEventListener: () => {},
+        }),
+    });
+}
+
+function renderToolbar() {
+    return render(
+        <Toolbar
+            isModified={false}
+            onValidate={vi.fn()}
+            onRun={vi.fn()}
+            agentRailOpen={false}
+            onToggleAgentRail={vi.fn()}
+            referenceImagesPresent={false}
+            referenceImagesVisible
+            onToggleReferenceImages={vi.fn()}
+            markingMode={false}
+            onToggleMarkingMode={vi.fn()}
+            sectionMode={false}
+            onToggleSectionMode={vi.fn()}
+            inspectorOpen
+            onToggleInspector={vi.fn()}
+            code="box(10,10,10)"
+        />,
+    );
+}
+
+afterEach(() => {
+    cleanup();
+    setNarrow(false);
+});
+
+beforeEach(() => {
+    setNarrow(true);
+});
+
+describe('Toolbar on a narrow viewport', () => {
+    it('keeps Validate and Run on the bar', () => {
+        renderToolbar();
+        expect(screen.getByLabelText('Run')).toBeDefined();
+        expect(screen.getByLabelText('Validate')).toBeDefined();
+    });
+
+    it('collapses the secondary controls into the overflow menu', () => {
+        renderToolbar();
+        expect(screen.queryByTestId('toolbar-publish')).toBeNull();
+        expect(screen.queryByTestId('toolbar-mark')).toBeNull();
+        expect(screen.queryByTestId('toolbar-section')).toBeNull();
+        expect(screen.queryByTestId('toolbar-inspector')).toBeNull();
+        expect(screen.queryByTestId('toolbar-my-designs')).toBeNull();
+
+        fireEvent.click(screen.getByTestId('toolbar-overflow'));
+
+        expect(screen.getByTestId('toolbar-publish')).toBeDefined();
+        expect(screen.getByTestId('toolbar-mark')).toBeDefined();
+        expect(screen.getByTestId('toolbar-section')).toBeDefined();
+        expect(screen.getByTestId('toolbar-inspector')).toBeDefined();
+        expect(screen.getByTestId('toolbar-my-designs')).toBeDefined();
+    });
+
+    it('closes the overflow menu on Escape', () => {
+        renderToolbar();
+        fireEvent.click(screen.getByTestId('toolbar-overflow'));
+        expect(screen.getByTestId('toolbar-overflow-panel')).toBeDefined();
+
+        fireEvent.keyDown(document, { key: 'Escape' });
+        expect(screen.queryByTestId('toolbar-overflow-panel')).toBeNull();
+    });
+
+    it('keeps every control on the bar on a wide viewport', () => {
+        setNarrow(false);
+        renderToolbar();
+        expect(screen.queryByTestId('toolbar-overflow')).toBeNull();
+        expect(screen.getByTestId('toolbar-publish')).toBeDefined();
+        expect(screen.getByTestId('toolbar-inspector')).toBeDefined();
+    });
+});

src/studio/components/Layout/Header.mobile.test.tsx

@@ -0,0 +1,93 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2026 Andrii Shylenko and kernelCAD contributors
+// @vitest-environment happy-dom
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import { Header } from './Header';
+import { WorkbenchProvider } from '../../context/WorkbenchContext';
+import { StudioChromeProvider } from '../../context/StudioChromeContext';
+
+vi.mock('../../../shared/worker/geometryEngine', async () => {
+    const actual = await vi.importActual('../../../shared/worker/geometryEngine');
+    const mockInstance = {
+        initialize: vi.fn().mockResolvedValue(true),
+        executeCode: vi.fn().mockResolvedValue({ geometries: [], sketches: [] }),
+    };
+    return {
+        ...actual,
+        exportSTEP: vi.fn().mockResolvedValue(new Blob(['mock data'])),
+        exportSTL: vi.fn().mockResolvedValue(new Blob(['mock data'])),
+        init: vi.fn().mockResolvedValue(true),
+        GeometryEngine: { getInstance: () => mockInstance },
+    };
+});
+
+/** Force the narrow-viewport branch (`(max-width: 767px)` matches). */
+function setNarrow(narrow: boolean) {
+    Object.defineProperty(window, 'matchMedia', {
+        configurable: true,
+        writable: true,
+        value: (query: string) => ({
+            matches: narrow,
+            media: query,
+            addEventListener: () => {},
+            removeEventListener: () => {},
+        }),
+    });
+}
+
+function renderHeader(headerLeft?: React.ReactNode) {
+    return render(
+        <WorkbenchProvider>
+            <StudioChromeProvider value={{ headerLeft }}>
+                <Header />
+            </StudioChromeProvider>
+        </WorkbenchProvider>,
+    );
+}
+
+beforeEach(() => setNarrow(true));
+afterEach(() => {
+    cleanup();
+    setNarrow(false);
+});
+
+describe('Header on a narrow viewport', () => {
+    it('moves the instrument clusters into the overflow menu', () => {
+        renderHeader();
+        expect(screen.queryByTestId('view-3d-toggle')).toBeNull();
+        expect(screen.queryByTestId('viewport-background-toggle')).toBeNull();
+        expect(screen.queryByTestId('viewport-grid-toggle')).toBeNull();
+        expect(screen.queryByTitle('Export STEP')).toBeNull();
+
+        fireEvent.click(screen.getByTestId('header-overflow'));
+
+        expect(screen.getByTestId('view-3d-toggle')).toBeDefined();
+        expect(screen.getByTestId('viewport-background-toggle')).toBeDefined();
+        expect(screen.getByTestId('viewport-grid-toggle')).toBeDefined();
+        expect(screen.getByTitle('Export STEP')).toBeDefined();
+    });
+
+    it('keeps the account slot pinned on the bar', () => {
+        renderHeader();
+        expect(screen.getByTestId('account-slot')).toBeDefined();
+    });
+
+    it('drops the Studio project name only when the route supplies its own title', () => {
+        renderHeader();
+        expect(screen.getByText('Untitled Project')).toBeDefined();
+        cleanup();
+
+        renderHeader(<span>My Bracket</span>);
+        expect(screen.queryByText('Untitled Project')).toBeNull();
+        expect(screen.getByText('My Bracket')).toBeDefined();
+    });
+
+    it('keeps the instruments inline on a wide viewport', () => {
+        setNarrow(false);
+        renderHeader();
+        expect(screen.queryByTestId('header-overflow')).toBeNull();
+        expect(screen.getByTestId('view-3d-toggle')).toBeDefined();
+        expect(screen.getByTitle('Export STEP')).toBeDefined();
+    });
+});