bitborg/bitborg-web
Bevaka
2
0
Avgrena
Du har redan avgrenat bitborg-web
 0
Kod Ärenden 13 Ändringsförfrågningar 3 Projekt 1 Utgåvor Paket 1 Aktiviteter Actions

fix(nav): shrink the header on small screens #156

Nytt ärende
Stängd
öppnade 2026-08-02 12:30:08 +00:00 av supernaut · 1 kommentar
supernaut kommenterad 2026-08-02 12:30:08 +00:00
Ägare
Kopiera länk

On a 375 px phone the header alone is 278 px, and <main> starts at 325 px on /docs/faq/ and
360 px on /pricing/ once breadcrumbs are added — 41 % to 54 % of a 375 x 667 viewport spent
before any content.

Measured header heights on /: 768 px -> 221.6 · 480-600 -> 258.9 · 375-414 -> 277.6 · 360 ->
312.3 · 320 -> 354.9. It also varies per page at the same width (375 px: / 277.6, /pricing/
312.3) because everything depends on wrapping.

.brand (src/components/header.astro:26-31) is a fixed 112 px at every width — padding: var(--spacing-xl) var(--page-margin), i.e. 32 px above and below a 48 px logo — and holds one
non-navigational link. Nothing in header.astro responds to a breakpoint; the 2 rem padding that
gives a desktop header its air is the same 2 rem on a 320 px phone.

Fix

One @include breakpoint-max("medium") block. No JavaScript, no new component.

  • .brand padding to var(--spacing-md), logo height 48 -> 40.
  • Put the brand and the user menu on one row (logo left, Sign in / Sign up right) instead of the
    current flex-flow: column nowrap at header.astro:20.
  • Move the language switcher to the footer below medium (operator decision). It is a
    once-per-visitor control occupying 75 px in the top band of every page, and this is the single
    largest space win available. Note the trade-off being accepted: the portal has no
    Accept-Language detection, so a reader who lands in the wrong language must now scroll to
    change it. If that proves to bite, the mitigation is detection, not moving the control back.

Done when

  • Header height at 375 px is at most 170 px, and <main> starts within the first 220 px on a page
    with breadcrumbs.
  • Header height varies by no more than one row between pages at the same width.
  • Layout at 768 px and above is unchanged.
  • No navigation link is removed or hidden behind an interaction — the language switcher is
    relocated within the page, not concealed.

Part of gitborg/gitborg-docs#67.

On a 375 px phone the header alone is 278 px, and `<main>` starts at 325 px on `/docs/faq/` and 360 px on `/pricing/` once breadcrumbs are added — 41 % to 54 % of a 375 x 667 viewport spent before any content. Measured header heights on `/`: 768 px -> 221.6 · 480-600 -> 258.9 · 375-414 -> 277.6 · 360 -> 312.3 · 320 -> 354.9. It also varies per page at the same width (375 px: `/` 277.6, `/pricing/` 312.3) because everything depends on wrapping. `.brand` (`src/components/header.astro:26-31`) is a fixed 112 px at every width — `padding: var(--spacing-xl) var(--page-margin)`, i.e. 32 px above and below a 48 px logo — and holds one non-navigational link. Nothing in `header.astro` responds to a breakpoint; the 2 rem padding that gives a desktop header its air is the same 2 rem on a 320 px phone. ## Fix One `@include breakpoint-max("medium")` block. No JavaScript, no new component. - `.brand` padding to `var(--spacing-md)`, logo height 48 -> 40. - Put the brand and the user menu on one row (logo left, Sign in / Sign up right) instead of the current `flex-flow: column nowrap` at `header.astro:20`. - **Move the language switcher to the footer below `medium`** (operator decision). It is a once-per-visitor control occupying 75 px in the top band of every page, and this is the single largest space win available. Note the trade-off being accepted: the portal has no `Accept-Language` detection, so a reader who lands in the wrong language must now scroll to change it. If that proves to bite, the mitigation is detection, not moving the control back. ## Done when - Header height at 375 px is at most 170 px, and `<main>` starts within the first 220 px on a page with breadcrumbs. - Header height varies by no more than one row between pages at the same width. - Layout at 768 px and above is unchanged. - No navigation link is removed or hidden behind an interaction — the language switcher is relocated within the page, not concealed. Part of gitborg/gitborg-docs#67.
supernaut lade till detta till projektet Bitborg Web 2026-08-02 12:34:23 +00:00
supernaut kommenterad 2026-09-20 22:50:47 +00:00
Upphovsperson
Ägare
Kopiera länk

Picked this up and found most of it already shipped. Recording the measurements so the next person does not redo the investigation.

Three of the four fix bullets landed in #170 and this issue was never closed:

  • .brand padding is already var(--spacing-md) below medium (header.astro).
  • The brand and the user menu already share one row below medium, not the old column stack.
  • The language switcher is already rendered by the footer below medium (secondary-navigation.astro, footer.astro), relocated and not concealed.

The fourth bullet says logo height 48 to 40. It is 24 today. logo.astro records why: at 40 px the logo is wide enough at its 5:1 aspect to push the account row off the shared band and reinstate a row, so following that number literally would make the header taller.

The baseline in the body no longer reproduces, for the same reason. It records 278 px at 375 px. Current main measures 242 px.

The remaining target is not reachable under this issue's constraints

Header at 375 px breaks down as .header-band 80 to 104 px plus .main-navigation 130 px. The five main navigation links wrap to two rows below small, and each row is held to the 48 px WCAG 2.5.8 touch-target minimum by src/style/shared/navigation.scss:19-27, added by #170 for #159. Even a perfect one-row band leaves roughly 178 to 210 px, above the 170 px target.

Getting under 170 px needs one of: fewer or regrouped main navigation rows, touch targets below the WCAG minimum, or a JavaScript disclosure pattern. All three are outside this issue's stated scope (CSS only, no JavaScript, no link removed or hidden).

What was done

#245 tightens the .user-menu gap below medium, which is the one measurable win left inside scope. It takes 242 px to 234 px at 320, 360 and 375 px and changes nothing at 414 px and above. It does not close this issue.

Measured with Chromium on the built site, getBoundingClientRect() on header.site-header and <main>:

width header before header after /docs/faq/ main top after
320 242 234 337.7
360 242 234 311
375 242 234 311
414 210 210 287
480 210 210 287
600 146 146 223
768 221.6 221.6 269.3

Header height is identical across /, /pricing/ and /docs/faq/ at every width tested, so the "varies by no more than one row" criterion is met. 768 px and above is unchanged.

Decision needed

Either widen this issue's scope to allow one of the three routes above, or lower the target to what a CSS-only fix can reach and close it.

Picked this up and found most of it already shipped. Recording the measurements so the next person does not redo the investigation. Three of the four fix bullets landed in #170 and this issue was never closed: - `.brand` padding is already `var(--spacing-md)` below `medium` (`header.astro`). - The brand and the user menu already share one row below `medium`, not the old column stack. - The language switcher is already rendered by the footer below `medium` (`secondary-navigation.astro`, `footer.astro`), relocated and not concealed. The fourth bullet says logo height 48 to 40. It is 24 today. `logo.astro` records why: at 40 px the logo is wide enough at its 5:1 aspect to push the account row off the shared band and reinstate a row, so following that number literally would make the header taller. The baseline in the body no longer reproduces, for the same reason. It records 278 px at 375 px. Current main measures 242 px. ## The remaining target is not reachable under this issue's constraints Header at 375 px breaks down as `.header-band` 80 to 104 px plus `.main-navigation` 130 px. The five main navigation links wrap to two rows below `small`, and each row is held to the 48 px WCAG 2.5.8 touch-target minimum by `src/style/shared/navigation.scss:19-27`, added by #170 for #159. Even a perfect one-row band leaves roughly 178 to 210 px, above the 170 px target. Getting under 170 px needs one of: fewer or regrouped main navigation rows, touch targets below the WCAG minimum, or a JavaScript disclosure pattern. All three are outside this issue's stated scope (CSS only, no JavaScript, no link removed or hidden). ## What was done #245 tightens the `.user-menu` gap below `medium`, which is the one measurable win left inside scope. It takes 242 px to 234 px at 320, 360 and 375 px and changes nothing at 414 px and above. It does not close this issue. Measured with Chromium on the built site, `getBoundingClientRect()` on `header.site-header` and `<main>`: | width | header before | header after | `/docs/faq/` main top after | | --- | --- | --- | --- | | 320 | 242 | 234 | 337.7 | | 360 | 242 | 234 | 311 | | 375 | 242 | 234 | 311 | | 414 | 210 | 210 | 287 | | 480 | 210 | 210 | 287 | | 600 | 146 | 146 | 223 | | 768 | 221.6 | 221.6 | 269.3 | Header height is identical across `/`, `/pricing/` and `/docs/faq/` at every width tested, so the "varies by no more than one row" criterion is met. 768 px and above is unchanged. ## Decision needed Either widen this issue's scope to allow one of the three routes above, or lower the target to what a CSS-only fix can reach and close it.
Logga in för att delta i denna konversation.
Ingen gren/etikett specificerad
Grenar Taggar
main
feat/279-renewal-date
feat/149-paid-signup
test/csrf-origin-check
Inga resultat hittades.
Etiketter
Rensa etiketter
  
area/backups
Backup & restore

  
area/ci
Actions / runners

  
area/control-panel
Logged-in self-service area

  
area/identity
Kanidm / OIDC / entitlements

  
area/infra
Infrastructure (OpenTofu/Ansible/host)

  
area/observability
Monitoring / logs / analytics

  
area/payments
Billing / payment providers

  
area/security
Security & compliance (incl. ISO 27001)

  
area/storage
Volumes / data / LFS

  
area/web
Public web portal (gitborg-web)

  
blocked
Evaluated and specified, but waiting on an external dependency

  
needs-info
Waiting on the reporter for more information

  
needs-triage
Not yet evaluated

  
ready-for-implementation
Fully specified, ready to be picked up

  
type
bug
 Something is broken

  
type
chore
 Maintenance / housekeeping

  
type
docs
 Documentation

  
type
epic
 High-level roadmap item

  
type
feature
 New capability

  
type
task
 Concrete unit of work

  
wontfix
Will not be actioned

Inga etiketter
area/backups
area/ci
area/control-panel
area/identity
area/infra
area/observability
area/payments
area/security
area/storage
area/web
blocked
needs-info
needs-triage
ready-for-implementation
type
bug
type
chore
type
docs
type
epic
type
feature
type
task
wontfix
Milstolpe
Rensa milstolpe
Inga objekt
Ingen milstolpe
Projekt
Rensa projekt
Inga objekt
Inget projekt
Bitborg Web
Tilldelade
Rensa tilldelade
Inga tilldelade
1 deltagare
Notiser
Förfallodatum
Förfallodatumet är ogiltigt eller utanför gränserna. Använd formatet "åååå-mm-dd".

Inget förfallodatum satt.

Beroenden

Inga beroenden satta

Referens
bitborg/bitborg-web#156
Ingen beskrivning angiven.