zzstoatzz.io / plyr.fm
audio streaming app plyr.fm
fork atom

fix: lower header mobile breakpoint from 1599px to 1300px (#646)

* fix: lower header mobile breakpoint from 1599px to 1100px

the header was switching to mobile layout at 1599px, way too high.
at 1512px viewport width, users were seeing mobile header (no stats,
no icons) even on desktop.

changes:
- lower header breakpoint to 1100px (800px content + margin space)
- add breakpoints.ts as single source of truth for breakpoint values
- add comments referencing breakpoints.ts in Header.svelte

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: hide search in margin at 1300px to prevent crowding stats

adds intermediate breakpoint - search hides from margin before stats,
giving stats more breathing room as viewport narrows.

breakpoints now:
- >1300px: full desktop (stats + search in margin)
- 1100-1300px: stats only in margin (search hidden)
- <1100px: mobile layout (margin elements hidden)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: switch to mobile layout at 1300px instead of intermediate state

simpler approach: just switch to mobile layout when margin space gets
tight, rather than hiding individual elements.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

authored by zzstoatzz.io

Claude Opus 4.5 and committed by
GitHub 2ee1360e fb913f05

+33 -4
unified split
+29
frontend/src/lib/breakpoints.ts
···
··· 1 + /** 2 + * responsive breakpoints 3 + * 4 + * CSS media queries can't use CSS variables, so we document the values here 5 + * as the single source of truth. when changing breakpoints, update both this 6 + * file and the corresponding @media queries in components. 7 + * 8 + * usage in components: 9 + * @media (max-width: 768px) { ... } // mobile 10 + * @media (max-width: 1100px) { ... } // header mobile (needs margin space) 11 + */ 12 + 13 + /** standard mobile breakpoint - used by most components */ 14 + export const MOBILE_BREAKPOINT = 768; 15 + 16 + /** small mobile breakpoint - extra compact styles */ 17 + export const MOBILE_SMALL_BREAKPOINT = 480; 18 + 19 + /** 20 + * header mobile breakpoint - switch to mobile layout before margin elements 21 + * (stats, search, logout) crowd each other. 22 + */ 23 + export const HEADER_MOBILE_BREAKPOINT = 1300; 24 + 25 + /** content max-width used across pages */ 26 + export const CONTENT_MAX_WIDTH = 800; 27 + 28 + /** queue panel width */ 29 + export const QUEUE_WIDTH = 360;
+4 -4
frontend/src/lib/components/Header.svelte
··· 421 color: var(--bg-primary); 422 } 423 424 - /* Hide margin-positioned elements and switch to mobile layout at the same breakpoint. 425 - Account for queue panel (320px) potentially being open - need extra headroom */ 426 - @media (max-width: 1599px) { 427 .margin-left, 428 .logout-right { 429 display: none !important; ··· 442 } 443 } 444 445 - /* Smaller screens: compact header */ 446 @media (max-width: 768px) { 447 .header-content { 448 padding: 0.75rem 0.75rem;
··· 421 color: var(--bg-primary); 422 } 423 424 + /* header mobile breakpoint - see $lib/breakpoints.ts 425 + switch to mobile before margin elements crowd each other */ 426 + @media (max-width: 1300px) { 427 .margin-left, 428 .logout-right { 429 display: none !important; ··· 442 } 443 } 444 445 + /* mobile breakpoint - see $lib/breakpoints.ts */ 446 @media (max-width: 768px) { 447 .header-content { 448 padding: 0.75rem 0.75rem;