galaxyproject / galaxyproject/brc-analytics
Header: collapse overflowing navigation into a "More" button at mid-sized viewports
- Dominant language
- TypeScript
- Stars
- 7
- Forks
- 11
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 16
Description
## Problem
At mid-sized viewports the header has more navigation items than fit, so the row runs past the right edge of the page and the last entries are cut off or unreachable.
On an iPad Mini at 768px the nav renders `About`, `Learn`, `Organisms`, `Assemblies`, `Workflows`, `Logan Search`, `Priority Pathogens`, `Assistant` plus the search entry and Sign In — "Priority Pathogens" is already clipped at the viewport edge and everything after it is off-screen.
This also causes a horizontal scrollbar: at 768px the document measures `scrollWidth` 814 against `clientWidth` 768, i.e. **46px of horizontal overflow on every page**, which is the header's doing rather than any page content.
## What we want
Collapse the overflowing navigation entries into a **"More" button** at these widths, so the visible items always fit the available space and the rest stay reachable from the menu.
Below the mobile breakpoint the header already collapses to the hamburger, so this is specifically about the band between that and the width where every item fits on one row.
## Notes
- Nav entries are built in `site-config/brc-analytics/local/navigation.ts` (`headerNavigation()`), and the header itself is findable-ui's `Header`, rendered from `packages/shared/components/layout/AppProviders/appProviders.tsx`.
- The number of entries is not fixed — `Logan Search` is feature-flagged (`loganSearchEnabled`), so whatever we do has to cope with the list growing or shrinking rather than assuming a set count.
- GA2 uses the same header, so worth checking the change is safe there even though its nav is shorter.
## Acceptance criteria
- No navigation entry is clipped or unreachable at any viewport width.
- No horizontal overflow from the header — `scrollWidth` equals `clientWidth` at 768px and across the mid-sized band.
- All entries remain reachable, either directly or from the "More" menu.
- The mobile hamburger behaviour below the small breakpoint is unchanged.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.