fix(mobile): clip the nav drawer viewport so it cannot scroll out of frame

.changeset/fix-mobile-drawer-offscreen-scroll.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fixed the mobile nav drawer sliding permanently out of frame after the keyboard or a focus change scrolled the panel track.

src/app/components/page/MobileNavDrawer.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+import { MemoryRouter } from 'react-router-dom';
+import { MobileNavDrawer } from './MobileNavDrawer';
+
+vi.mock('$state/hooks/settings', () => ({
+  useSetting: () => [true, vi.fn<() => void>()],
+}));
+
+vi.mock('./PersistentRoomHost', () => ({
+  PersistentRoomHost: () => <div data-testid="persistent-room-host" />,
+}));
+
+beforeAll(() => {
+  window.matchMedia =
+    window.matchMedia ??
+    ((query: string) =>
+      ({
+        matches: false,
+        media: query,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        addListener: () => {},
+        removeListener: () => {},
+        onchange: null,
+        dispatchEvent: () => false,
+      }) as unknown as MediaQueryList);
+});
+
+const renderDrawer = () =>
+  render(
+    <MemoryRouter initialEntries={['/home']}>
+      <MobileNavDrawer nav={<div>nav</div>}>
+        <div>content</div>
+      </MobileNavDrawer>
+    </MemoryRouter>
+  );
+
+describe('MobileNavDrawer', () => {
+  // The panels sit side by side in a track twice the viewport wide, moved by transform.
+  // `hidden` leaves a scrollport that focus or scrollIntoView scrolls a full panel width,
+  // stacking on top of the transform and stranding the active panel off frame.
+  it('clips the viewport instead of hiding overflow, so it can never be scrolled', () => {
+    renderDrawer();
+
+    const viewport = screen.getByTestId('mobile-nav-drawer-viewport');
+
+    expect(viewport.style.overflow).toBe('clip');
+    expect(viewport.style.overflow).not.toBe('hidden');
+  });
+});

src/app/components/page/MobileNavDrawer.tsx

@@ -340,6 +340,7 @@ export function MobileNavDrawer({ nav, rail, bottomNav, children }: MobileNavDra
     <div
       ref={viewportRef}
       className="no-scrollbar"
+      data-testid="mobile-nav-drawer-viewport"
       onTouchStartCapture={(event) => {
         const viewport = viewportRef.current;
         const touch = event.touches[0];
@@ -419,7 +420,9 @@ export function MobileNavDrawer({ nav, rail, bottomNav, children }: MobileNavDra
         flexGrow: 1,
         height: '100%',
         width: '100%',
-        overflow: 'hidden',
+        // `clip`, not `hidden`: hidden keeps a scrollport, so a focus or scrollIntoView on
+        // the revealed panel scrolls it a full panel width out of frame, permanently.
+        overflow: 'clip',
         overscrollBehaviorX: 'none',
         touchAction: 'pan-y',
       }}