fix(web): stop filter controls crowding out search bars on phones

[joshunrau]

Closes #1583

What changed

Instrument search (InstrumentShowcase, used by Administer Instrument and Remote Assignment). The search bar and the Kind, Tags and Language dropdowns sat in one unwrapped row. At 390px that left the search bar 55px wide. Below lg, the search bar now gets its own full-width row, and the three dropdowns share the row underneath it.

I used lg rather than md because the sidebar appears at md and takes 19rem. With an md breakpoint, a 768px screen still left the search bar only 97px wide. With lg it is 400px at 768px and 532px at 900px. At 1024px and wider the row layout comes back, with the same measurements as before.

Data hub. Installed libui (6.16.1) DataTableControls already puts the search bar on its own full-width row below md, so the search bar itself was fine. The real problem at phone width was the row of Subject Lookup, Filters and Export: it didn't wrap, and Export ran past the right edge of the screen (right edge at 393px on a 375px or 390px screen). Below md these controls now wrap: Subject Lookup and Filters share the first row, and Export takes the second. At md and wider the layout is unchanged. Before and after measurements match exactly at 768, 900, 1024 and 1280px.

Verification

• Unit tests: apps/web/src/components/InstrumentShowcase/__tests__/InstrumentShowcase.test.tsx and the new apps/web/src/__tests__/datahub-table-controls.test.tsx. happy-dom does no layout, so both assert on the responsive utility classes. I confirmed both are collected (vitest list --filesOnly) and that both fail when the old classes are put back.

• E2E tests: new on a phone describe blocks in testing/src/specs/accessible-instruments.spec.ts and testing/src/specs/datahub.spec.ts, using a shared PHONE_VIEWPORT (390x844). They measure layout with boundingBox():

  • Instruments: the search bar spans the full showcase width, and the Kind filter sits below it.
  • Data hub: every control stays inside the search bar's width.

  Against the old layout they fail with Received: 55.109375 (expected 358) and Received: 392.796875 (expected <= 374).

• pnpm lint, pnpm test (172 files, 1579 tests) and pnpm test:e2e (264 passed) are all green.

Not covered

• Between 768px and about 860px, the data hub search bar is still squeezed (46px at 768px). The cause is libui's DataTableControls, which switches to its row layout at md while the sidebar takes 19rem. Fixing it needs a libui change, so it isn't in this PR.

Co-Authored-By: Claude Opus 5.5 noreply@anthropic.com