Repository navigation
fix(frontend): Admin and Inventory sub-tab bars clip the last tab at 390px #1647
Description
Summary
At 390px the Admin and Inventory sub-tab bars clip their last tab and a deep-linked active sub-tab is not scrolled into view.
Current behaviour
The last tab is cut off ("Accounts & on...", "RI Exchange"). Opening a deep link to a sub-tab that sits off-screen leaves the active tab hidden.
Steps to reproduce
- Open the app at 390px width.
- Go to Admin or Inventory and look at the sub-tab bar.
- Deep-link to the last sub-tab.
Expected behaviour
All tabs are reachable (scrollable bar with visible affordance or wrapping) and the active tab is scrolled into view.
Proposed fix
Make the sub-tab bar horizontally scrollable at narrow widths and call scrollIntoView({ inline: 'center', block: 'nearest' }) on the active tab after activation (frontend/src/navigation.ts and the sub-tab CSS under frontend/src/styles/).
References
Discovered while reviewing #1626.
Severity
low
Activity
cristim commentedon Nov 10, 2026
Checked against main (f6f6dc3 era) and in a real browser: the premise is gone. #1631 made the Admin and Inventory sub-tab bars horizontally scrollable edge to edge on phones, and #1711 added the visible scroll hint; frontend/src/nav/subtab-scroll.ts (revealSelectedTab, wired from app.ts) scrolls the selected tab into view on every aria-selected change, including a deep link.
Playwright probe, production bundle, 390x844, deep-linking each URL cold (API mocked, throwaway spec, not committed):
All 4 passed. Closing as completed by ui(shell): phone layout with 2x2 KPI tiles, scrollable sub-tabs, drawer #1631 and fix(frontend): mid-width layout: icon-only sidebar, one-line topbar chips, visible scroll hint #1711. The related fix(frontend): Azure RI exchange table header may widen the page on phones (same sr-only pattern as #1665) #1891 (Azure RI exchange table header on phones) is a different element and stays open.