Skip to content

feat: responsive layout — tables scroll, grids collapse, headers stack on narrow viewports#67

Merged
eclectic-coding merged 1 commit into
mainfrom
feat/responsive-layout
May 26, 2026
Merged

feat: responsive layout — tables scroll, grids collapse, headers stack on narrow viewports#67
eclectic-coding merged 1 commit into
mainfrom
feat/responsive-layout

Conversation

@eclectic-coding
Copy link
Copy Markdown
Owner

Closes #39

Summary

  • Adds sqw-page-header--split base CSS (was used in views but never defined — previously just stacked block elements)
  • Adds _10_responsive.css with three breakpoints:
    • 768px — cache size grid and cache timeline (2-col) collapse to single column; stacked timeline charts gain a top border instead of left border
    • 640px — main padding reduced to 1rem; split page headers stack vertically; tables become display: block; overflow-x: auto for horizontal scroll; stats grid shrinks minmax from 160px → 120px; gem grid collapses to 1 column; truncate max-width reduced; period filter de-floats
    • 576px — header and subnav inner padding reduced; subnav wraps to multiple rows when needed

Test plan

  • Resize browser to ~640px wide — confirm tables scroll horizontally, page headers stack, padding reduces
  • Resize to ~768px — confirm cache size grid and timeline collapse to single column
  • Resize to ~480px — confirm header padding tightens and subnav wraps cleanly
  • Check all three sections (Queue, Cache, Cable) at narrow widths
  • Confirm no visual regressions at full desktop width
  • bundle exec rake passes clean

🤖 Generated with Claude Code

…k on narrow viewports

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@eclectic-coding eclectic-coding merged commit 0082b50 into main May 26, 2026
5 checks passed
@eclectic-coding eclectic-coding deleted the feat/responsive-layout branch May 26, 2026 20:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[v0.7.0] UX: responsive layout

1 participant