Mobile: Active Installed Apps category tab can remain off-screen after navigation #26427
Description
Issue Summary
On mobile devices, the Installed Apps category pages (/apps/installed/[category]) have a UX issue in the horizontally scrollable category navbar.
When a user selects a category that is positioned far to the right (e.g. “Other”), the page navigates correctly, but the active category tab may remain off-screen, making it unclear which category is currently selected.
This behavior only affects mobile viewports. Desktop is unaffected since it uses a vertical tab layout.
Steps to Reproduce
-
Start the web app locally.
-
Open DevTools and switch to a mobile viewport (device emulation).
-
Navigate to /apps/installed/calendar.
-
In the horizontal category navbar, tap a category that is initially off-screen to the right (e.g. Other).
Additional context:
The issue occurs because the horizontal navbar does not automatically scroll the active tab into view after navigation.
Any other relevant information. For example, why do you consider this a bug and what did you expect to happen instead?
Actual Results
-
Navigation to the selected category works correctly.
-
However, the active category tab (aria-current="page") may remain off-screen in the horizontal navbar.
-
The user has no immediate visual indication of the currently active category.
Expected Results
-
Navigation should continue to work as it does today.
-
After selecting a category, the active tab should automatically scroll into view within the horizontal navbar on mobile.
-
Desktop behavior should remain unchanged (vertical tabs).
Technical details
- Affected viewport: Mobile only
- Browser: Chrome (mobile emulation)
- OS: macOS
- Node.js version: (same as local dev environment)
- Layout: Horizontal scrollable tabs on mobile
- Accessibility detail: Active tab is marked with aria-current="page" but not scrolled into view