galaxyproject / galaxyproject/brc-analytics

Header: collapse overflowing navigation into a "More" button at mid-sized viewports

Closed
#1,747 0 comments 0 reactions 1 assignee Claimed by @frano-m View on GitHub
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.

Header nav clipped at 768px

## 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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.