fix(frontend): move the topbar controls into the drawer below 768px

frontend/src/__tests__/mobile-nav.test.ts

@@ -5,23 +5,39 @@
  * aria-expanded toggle, focus management, body scroll-lock class.
  */
 
-import { setupMobileNav } from '../app';
+import { setupMobileNav, syncHeaderPlacement } from '../app';
 
 function buildDOM(): void {
   document.body.innerHTML = `
-    <button type="button" class="hamburger" id="hamburger-btn"
-      aria-label="Open navigation menu"
-      aria-controls="sidebar"
-      aria-expanded="false">
-    </button>
+    <header class="app-topbar">
+      <button type="button" class="hamburger" id="hamburger-btn"
+        aria-label="Open navigation menu"
+        aria-controls="sidebar"
+        aria-expanded="false">
+      </button>
+      <div class="app-topbar-brand"><h1>CUDly</h1></div>
+      <div id="topbar-filters" class="app-topbar-filters" aria-label="Global filters"></div>
+      <div id="user-info">
+        <span id="user-email-display"></span>
+        <span id="user-role-display" class="role-badge"></span>
+        <a href="/docs/" target="_blank" class="header-link">API Docs</a>
+        <a id="feedback-link" href="#" class="header-link feedback-link">Feedback</a>
+        <button id="logout-btn">Logout</button>
+      </div>
+    </header>
     <div class="sidebar-overlay" id="sidebar-overlay" aria-hidden="true"></div>
     <aside id="sidebar" aria-label="Primary navigation" aria-hidden="true">
       <a class="tab-btn" href="/home" data-tab="home">Home</a>
       <a class="tab-btn" href="/plans" data-tab="plans">Plans</a>
+      <div class="app-sidebar-extras" id="sidebar-extras"></div>
     </aside>
   `;
 }
 
+function hamburgerBtn(): HTMLButtonElement {
+  return document.getElementById('hamburger-btn') as HTMLButtonElement;
+}
+
 describe('setupMobileNav', () => {
   beforeEach(() => {
     buildDOM();
@@ -151,3 +167,80 @@ describe('setupMobileNav', () => {
     expect(() => setupMobileNav()).not.toThrow();
   });
 });
+
+/**
+ * Placement of the topbar controls (issue #1779).
+ *
+ * These assert DOM parentage only. Whether the relocated controls are
+ * visible, on-screen and large enough to tap is a layout question jsdom
+ * cannot answer -- tests-e2e/mobile-header-drawer.spec.ts measures that in
+ * a real browser at a 390px viewport.
+ */
+describe('syncHeaderPlacement', () => {
+  beforeEach(buildDOM);
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const projected = (): HTMLElement[] => [
+    document.getElementById('topbar-filters')!,
+    document.getElementById('user-info')!,
+  ];
+
+  function parentIds(): (string | undefined)[] {
+    return projected().map(el => el.parentElement?.id);
+  }
+
+  test('narrow moves the filters and the account actions into the drawer slot', () => {
+    syncHeaderPlacement(true);
+    expect(parentIds()).toEqual(['sidebar-extras', 'sidebar-extras']);
+  });
+
+  test('widening restores both to the topbar, in header order', () => {
+    syncHeaderPlacement(true);
+    syncHeaderPlacement(false);
+
+    const topbar = document.querySelector<HTMLElement>('.app-topbar')!;
+    expect(projected().every(el => el.parentElement === topbar)).toBe(true);
+    const ids = Array.from(topbar.children).map(el => el.id).filter(Boolean);
+    expect(ids.indexOf('topbar-filters')).toBeLessThan(ids.indexOf('user-info'));
+  });
+
+  test('repeated narrow calls do not re-append the same nodes', () => {
+    syncHeaderPlacement(true);
+    const marker = document.createElement('span');
+    projected()[0]!.appendChild(marker);
+    // A redundant appendChild would tear the subtree out and back in,
+    // dropping focus and closing any open chip popover.
+    syncHeaderPlacement(true);
+    expect(marker.isConnected).toBe(true);
+    expect(document.getElementById('sidebar-extras')!.children).toHaveLength(2);
+  });
+
+  test('no-op when the drawer slot is absent', () => {
+    const topbar = document.querySelector<HTMLElement>('.app-topbar')!;
+    document.getElementById('sidebar-extras')!.remove();
+    expect(() => syncHeaderPlacement(true)).not.toThrow();
+    expect(projected().every(el => el.parentElement === topbar)).toBe(true);
+  });
+
+  test('clicking an account action in the drawer closes it', () => {
+    setupMobileNav();
+    syncHeaderPlacement(true);
+    hamburgerBtn().click();
+    document.getElementById('logout-btn')!.dispatchEvent(
+      new MouseEvent('click', { button: 0, bubbles: true }),
+    );
+    expect(document.body.classList.contains('sidebar-open')).toBe(false);
+  });
+
+  test('using a filter chip in the drawer leaves it open', () => {
+    setupMobileNav();
+    syncHeaderPlacement(true);
+    hamburgerBtn().click();
+    const chip = document.createElement('button');
+    document.getElementById('topbar-filters')!.appendChild(chip);
+    chip.dispatchEvent(new MouseEvent('click', { button: 0, bubbles: true }));
+    expect(document.body.classList.contains('sidebar-open')).toBe(true);
+  });
+});

frontend/src/__tests__/responsive.test.ts

@@ -41,10 +41,53 @@ describe('responsive.css nav wrap rules', () => {
     expect(tabsRule?.[0] ?? '').not.toMatch(/overflow-x/);
   });
 
-  it('wraps #user-info inside the ≤768px block so header children do not overflow', () => {
+  /**
+   * On the lazy `([\s\S]*?)\n}` capture used here and below: it does reach
+   * the end of the 768px block, despite looking like it would stop at the
+   * first nested rule. Every rule inside the block is indented, so the
+   * block's own closing brace is the only `}` at column zero and `\n}` can
+   * only anchor there. Measured against a brace-matched extraction: the true
+   * body is 5260 characters, the capture is 5259, the whole difference being
+   * the trailing newline the pattern consumes.
+   *
+   * This holds only while the stylesheet stays formatted that way. A nested
+   * rule closed at column zero would truncate the capture and these
+   * assertions would start passing or failing for the wrong reason.
+   *
+   * Issue #10 wrapped #user-info at ≤768px to stop it overflowing the
+   * header. That never worked: the topbar is a fixed --cudly-topbar-h box,
+   * so the extra rows painted over the page content instead (issue #1779).
+   * The regions are relocated into the drawer now, and the topbar copies
+   * are laid out away rather than left to paint behind the content.
+   *
+   * Source-text assertions only -- whether the relocated controls are
+   * actually visible and tappable is measured in a real browser by
+   * tests-e2e/mobile-header-drawer.spec.ts.
+   */
+  it('takes #user-info and #topbar-filters out of the topbar at ≤768px', () => {
     const match = css.match(/@media\s*\(max-width:\s*768px\)\s*{([\s\S]*?)\n}/);
     expect(match).not.toBeNull();
     const body = match?.[1] ?? '';
-    expect(body).toMatch(/#user-info\s*{[\s\S]*?flex-wrap:\s*wrap/);
+    expect(body).toMatch(
+      /\.app-topbar\s*>\s*#topbar-filters,\s*\.app-topbar\s*>\s*#user-info\s*{[\s\S]*?display:\s*none/,
+    );
+  });
+
+  it('styles both regions for the drawer slot at ≤768px', () => {
+    const match = css.match(/@media\s*\(max-width:\s*768px\)\s*{([\s\S]*?)\n}/);
+    expect(match).not.toBeNull();
+    const body = match?.[1] ?? '';
+    expect(body).toMatch(/\.app-sidebar-extras\s*{[\s\S]*?display:\s*flex/);
+    expect(body).toMatch(/\.app-sidebar-extras #topbar-filters/);
+    expect(body).toMatch(/\.app-sidebar-extras #user-info/);
+  });
+
+  it('does not stack the topbar into a column at ≤768px', () => {
+    const match = css.match(/@media\s*\(max-width:\s*768px\)\s*{([\s\S]*?)\n}/);
+    expect(match).not.toBeNull();
+    const body = match?.[1] ?? '';
+    // The `header { flex-direction: column }` rule was the overflow source.
+    expect(body).not.toMatch(/(^|\n)\s*header\s*{/);
+    expect(body).toMatch(/\.app-topbar\s*{[\s\S]*?justify-content:\s*flex-start/);
   });
 });

frontend/src/__tests__/setup.ts

@@ -82,6 +82,25 @@ if (typeof globalThis.structuredClone === 'undefined') {
   }) as typeof structuredClone;
 }
 
+// jsdom evaluates no CSS media queries and so ships no window.matchMedia,
+// which setupMobileNav() calls to decide where the topbar controls live.
+// Stub it as never-matching: jsdom has no viewport width to honour, so the
+// desktop branch is the only honest default. The narrow branch is asserted
+// by calling syncHeaderPlacement directly, and measured for real in the
+// Playwright suite, which has actual layout.
+if (typeof window.matchMedia !== 'function') {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(() => false),
+  })) as unknown as typeof window.matchMedia;
+}
+
 // Mock alert and confirm
 global.alert = jest.fn();
 global.confirm = jest.fn(() => true);

frontend/src/app.ts

@@ -653,21 +653,69 @@ async function handleFanOutExecute(buckets: FanOutBucket[]): Promise<void> {
   }
 }
 
+/**
+ * Drawer breakpoint. Must stay in lockstep with the `max-width: 768px` block
+ * in styles/responsive.css, which lays these same regions out of the topbar.
+ */
+const MOBILE_NAV_QUERY = '(max-width: 768px)';
+
+/**
+ * Topbar regions with no room in the topbar below the breakpoint, listed in
+ * the order they appear in the header so restoring them re-appends correctly.
+ */
+const DRAWER_PROJECTED_IDS = ['topbar-filters', 'user-info'] as const;
+
+/**
+ * Move the global filter chips and the account actions between the topbar
+ * and the drawer (issue #1779). Relocation rather than duplication: the
+ * chips and the logout/profile handlers are bound to these exact nodes, and
+ * moving a node keeps its listeners and state.
+ *
+ * Idempotent, and a no-op when either endpoint is absent.
+ */
+export function syncHeaderPlacement(isNarrow: boolean): void {
+  const topbar = document.querySelector<HTMLElement>('.app-topbar');
+  const extras = document.getElementById('sidebar-extras');
+  if (!topbar || !extras) return;
+
+  const target = isNarrow ? extras : topbar;
+  const elements = DRAWER_PROJECTED_IDS
+    .map(id => document.getElementById(id))
+    .filter((el): el is HTMLElement => el !== null);
+
+  // Re-append all of them whenever any one is misplaced, so the restored
+  // header keeps DRAWER_PROJECTED_IDS order. Appending an element that is
+  // already in place would tear its subtree out and back in, dropping focus
+  // and closing an open chip popover, so the whole pass is skipped instead.
+  const misplaced = elements.some(el => el.parentElement !== target);
+  if (!misplaced) return;
+  for (const el of elements) target.appendChild(el);
+}
+
 /**
  * Wire the mobile navigation drawer (hamburger button + overlay + Escape).
  *
  * Activates below 768px (CSS hides the hamburger above that breakpoint).
  *
  * Open:  body.classList.add('sidebar-open')
  *        hamburger aria-expanded="true"
- *        sidebar aria-hidden="false"
+ *        sidebar aria-hidden="false", inert cleared
  *        Focus first focusable link in the sidebar
  *
  * Close: body.classList.remove('sidebar-open')
  *        hamburger aria-expanded="false"
- *        sidebar aria-hidden="true"
+ *        sidebar aria-hidden="true", inert set
  *        Return focus to the hamburger button
  *
+ * A closed drawer needs both attributes and they always move together.
+ * aria-hidden takes it out of the accessibility tree; inert takes it out of
+ * sequential keyboard navigation, which neither aria-hidden nor the
+ * off-screen transform affects. With only the first, tabbing walks into
+ * controls that are invisible and expose no accessible name.
+ *
+ * Crossing the breakpoint in either direction is a third transition, neither
+ * an open nor a close: see applyBreakpointState.
+ *
  * Sidebar links also close the drawer (they navigate within the SPA).
  */
 export function setupMobileNav(): void {
@@ -680,6 +728,9 @@ export function setupMobileNav(): void {
     document.body.classList.add('sidebar-open');
     hamburger!.setAttribute('aria-expanded', 'true');
     sidebar!.setAttribute('aria-hidden', 'false');
+    // Before the focus below, not after: focus into an inert subtree is
+    // dropped silently and the caret would land on <body>.
+    sidebar!.removeAttribute('inert');
     if (overlay) overlay.setAttribute('aria-hidden', 'false');
 
     // Focus the first focusable element in the sidebar
@@ -693,10 +744,46 @@ export function setupMobileNav(): void {
     document.body.classList.remove('sidebar-open');
     hamburger!.setAttribute('aria-expanded', 'false');
     sidebar!.setAttribute('aria-hidden', 'true');
+    sidebar!.setAttribute('inert', '');
     if (overlay) overlay.setAttribute('aria-hidden', 'true');
     hamburger!.focus();
   }
 
+  /**
+   * Put the drawer into the closed state the current breakpoint calls for.
+   * Runs on load and on every crossing, neither of which the user asked for,
+   * so unlike openDrawer and closeDrawer it moves focus only to rescue it.
+   *
+   * Whether the sidebar is reachable at all is what the two widths disagree
+   * about. Above the breakpoint it is the permanently visible navigation and
+   * must stay both in the accessibility tree and in the tab order; below, it
+   * is a drawer parked off-screen holding the controls syncHeaderPlacement
+   * moves into it, and everything in there has to leave both with it.
+   *
+   * The narrow branch can never be hiding an open drawer: the only crossing
+   * that reaches it comes from the desktop side, where nothing opens one.
+   */
+  function applyBreakpointState(isNarrow: boolean): void {
+    // body.sidebar-open sets overflow:hidden outside the media query, so a
+    // drawer open across a resize would lock scrolling with no drawer left.
+    document.body.classList.remove('sidebar-open');
+    hamburger!.setAttribute('aria-expanded', 'false');
+    if (overlay) overlay.setAttribute('aria-hidden', 'true');
+
+    if (!isNarrow) {
+      sidebar!.removeAttribute('aria-hidden');
+      sidebar!.removeAttribute('inert');
+      return;
+    }
+    // Focus survives the crossing when it was already on a sidebar link, and
+    // hiding the subtree under it strands the caret where no screen reader
+    // can follow. Chromium does not blur it for us when inert lands, so this
+    // has to run first.
+    if (sidebar!.contains(document.activeElement)) hamburger!.focus();
+    sidebar!.setAttribute('aria-hidden', 'true');
+    sidebar!.setAttribute('inert', '');
+  }
+
   hamburger.addEventListener('click', () => {
     const isOpen = document.body.classList.contains('sidebar-open');
     if (isOpen) {
@@ -719,6 +806,27 @@ export function setupMobileNav(): void {
     }
   });
 
+  // Projected topbar controls: place them for the current width, then follow
+  // the breakpoint. Listeners are bound once here, never per relocation.
+  const mediaQuery = window.matchMedia(MOBILE_NAV_QUERY);
+  syncHeaderPlacement(mediaQuery.matches);
+  applyBreakpointState(mediaQuery.matches);
+  mediaQuery.addEventListener('change', event => {
+    syncHeaderPlacement(event.matches);
+    applyBreakpointState(event.matches);
+  });
+
+  // Account actions inside the drawer navigate or end the session, so they
+  // close it. Delegated from the slot, which outlives every relocation; the
+  // filter chips are deliberately excluded so picking a filter keeps the
+  // drawer open for the next one.
+  const extras = document.getElementById('sidebar-extras');
+  extras?.addEventListener('click', (e: MouseEvent) => {
+    const target = e.target as HTMLElement | null;
+    if (!target?.closest('#user-info a, #user-info button')) return;
+    if (document.body.classList.contains('sidebar-open')) closeDrawer();
+  });
+
   // Clicking any sidebar link closes the drawer (SPA navigation)
   sidebar.querySelectorAll<HTMLElement>('.tab-btn').forEach(link => {
     link.addEventListener('click', (e: MouseEvent) => {

frontend/src/index.html

@@ -87,6 +87,13 @@ <h1>CUDly</h1>
                         <span class="sidebar-label">Admin</span>
                     </a>
                 </nav>
+                <!-- Drawer slot for the topbar controls. Below the drawer
+                     breakpoint the topbar has no room for the filter chips
+                     and the account actions, so app.ts:setupMobileNav()
+                     relocates #topbar-filters and #user-info in here, and
+                     back out again above it (issue #1779). Empty on
+                     desktop. -->
+                <div class="app-sidebar-extras" id="sidebar-extras"></div>
             </aside>
             <main class="app-main" id="main-content">
             <!-- Home Tab. Provider/Account filters live in the topbar

frontend/src/styles/layout.css

@@ -165,6 +165,13 @@
     text-overflow: ellipsis;
 }
 
+/* Drawer slot for the relocated topbar controls (issue #1779). Empty and
+ * inert on desktop, where those controls stay in the topbar; the mobile
+ * rules live alongside the drawer block in responsive.css. */
+.app-sidebar-extras {
+    display: none;
+}
+
 .app-main {
     flex: 1;
     padding: var(--cudly-sp-5);