UI: Mobile header logo overlaps nav on narrow screens (iPhone SE) #196

New Issue

Closed

opened 2026-05-29 16:45:56 -05:00 by null · 1 comment

null commented

2026-05-29 16:45:56 -05:00

Owner

Severity: Major

Description: Mobile nav uses w-[85vw] max-w-[300px] but logo is h-12 md:h-16. On ~320px screens the logo + text can compress and cause truncation.

File: src/components/layout/Header.jsx lines 106-116

Fix direction: Use responsive logo sizing or collapse logo to icon-only below 320px.

**Severity:** Major **Description:** Mobile nav uses `w-[85vw] max-w-[300px]` but logo is `h-12 md:h-16`. On ~320px screens the logo + text can compress and cause truncation. **File:** `src/components/layout/Header.jsx` lines 106-116 **Fix direction:** Use responsive logo sizing or collapse logo to icon-only below 320px.

null added the

bug

labels 2026-05-29 16:45:56 -05:00

null added this to the Batch 11 — UI defects on narrow viewports milestone 2026-08-18 01:24:54 -05:00

null commented

2026-08-18 03:53:10 -05:00

Author

Owner

Not a defect — measured on the live site (v0.9.4) at the width the issue names and two others.

viewport   logo            title text       burger          overlap  truncated  h-scroll
320px      x 16-64  (48w)  x 76-252 (176w)  x 264-304 (40w) no       no         no
360px      x 16-64  (48w)  x 76-252 (176w)  x 304-344 (40w) no       no         no
390px      x 16-64  (48w)  x 76-252 (176w)  x 334-374 (40w) no       no         no

At 320px — iPhone SE, the case the title names — the title text ends at x=252 and the menu button starts at x=264. A 12px gap, not an overlap. span.scrollWidth equals span.clientWidth, so the text is not truncated, and document.documentElement.scrollWidth equals the viewport width, so there is no horizontal scroll.

The issue also mixes up two different elements. w-[85vw] max-w-[300px] is the mobile nav Sheet panel that slides in when you tap the menu; it has nothing to do with the header bar the logo sits in. The logo is h-12 at these widths (48px measured, as expected) — md:h-16 only applies from 768px, where there is abundant room.

Closing as no change required.

Verify: load the site at a 320px viewport and read the bounding boxes of header img, the title span, and the menu button — 16-64, 76-252 and 264-304, in that order, with no overlap.

Not a defect — measured on the live site (v0.9.4) at the width the issue names and two others. viewport logo title text burger overlap truncated h-scroll 320px x 16-64 (48w) x 76-252 (176w) x 264-304 (40w) no no no 360px x 16-64 (48w) x 76-252 (176w) x 304-344 (40w) no no no 390px x 16-64 (48w) x 76-252 (176w) x 334-374 (40w) no no no At 320px — iPhone SE, the case the title names — the title text ends at x=252 and the menu button starts at x=264. A **12px gap**, not an overlap. `span.scrollWidth` equals `span.clientWidth`, so the text is not truncated, and `document.documentElement.scrollWidth` equals the viewport width, so there is no horizontal scroll. The issue also mixes up two different elements. `w-[85vw] max-w-[300px]` is the **mobile nav Sheet panel** that slides in when you tap the menu; it has nothing to do with the header bar the logo sits in. The logo is `h-12` at these widths (48px measured, as expected) — `md:h-16` only applies from 768px, where there is abundant room. Closing as no change required. Verify: load the site at a 320px viewport and read the bounding boxes of `header img`, the title `span`, and the menu `button` — 16-64, 76-252 and 264-304, in that order, with no overlap.

null closed this issue

2026-08-18 03:53:10 -05:00