galaxyproject / galaxyproject/brc-analytics

Footer: items are squeezed at mid-sized viewports

Closed
#1,748 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 footer holds more items in its flex row than the width can carry, so everything is squeezed into columns far narrower than their content needs.

The worst of it is the funder attribution: "BRC Analytics is a part of the Bioinformatics Resource Centers for Infectious Diseases Program developed and funded by NIAID" wraps to roughly one or two words per line, becoming a tall narrow ribbon of text. The link labels do the same — "BV-BRC" breaks across two lines, "Pathogen Data Network" across two. One of the funder logos is pushed onto its own row below everything else, and the version chip is clipped at the right edge.

Image

## What we want

The footer should stay readable across the mid-sized band — text wrapping at sensible line lengths rather than one word per line, labels not broken mid-phrase, logos aligned on a consistent baseline, and nothing clipped at the edges.

This needs a CSS fix to how the footer's items are laid out at these widths. **The approach is deliberately left open** — reflowing, regrouping, stacking, or changing where the row breaks are all on the table, and it's worth looking at what reads best rather than starting from a chosen technique.

## Notes

- The footer is findable-ui's `Footer`, wrapped as `StyledFooter` in `packages/shared/components/layout/Footer/footer.styles.ts`; its contents come from the `footer` block of the site config (`site-config/brc-analytics/local/config.ts`).
- The content is a mix of item types — funder logos, a paragraph of attribution text, text links, icon links, and the version chip — which is part of why a single flex row struggles.
- GA2 shares the same footer component with different content, so check the change holds there too.
- Worth covering the full band, not just the one width in the screenshot: the squeeze appears well before the mobile breakpoint.

## Acceptance criteria

- Footer text and link labels wrap at readable line lengths across mid-sized viewports; no one-word-per-line columns and no labels broken mid-phrase.
- No footer item is clipped at the viewport edge, and no item is orphaned onto its own row.
- No horizontal overflow introduced at any width.
- The footer still reads correctly at desktop and mobile widths, on both sites.

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.