UI improvements: responsive layout, mobile nav, and accessibility#14
Merged
Conversation
Wrap header title and nav in a constrained inner div so they align horizontally with the main content area (max-width: 1200px, centered). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Navbar wraps title and links on small screens (≤640px) - Page headers stack vertically on mobile - Tables scroll horizontally inside cards on mobile - Stat grid uses smaller min cell width on mobile - Reduced main padding on mobile - Add sqd-grid-2 utility class (responsive 2-col → 1-col at 768px) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Toggle button with three-bar icon appears on small screens. Clicking opens a full-width dropdown nav with vertically stacked links. Uses an inline onclick — no JS file or pipeline required. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add :focus-visible ring (2px primary blue) for keyboard navigation - Add .sqd-sr-only utility class for visually-hidden text - aria-expanded on hamburger toggle, updated by onclick - role="status" on notice flash, role="alert" on alert flash - aria-label="Main" on <nav> - aria-current="page" on active nav links - scope="col" on all <th> elements - Visually-hidden "Actions" label on empty action <th> cells Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Welcome to Codecov 🎉Once you merge this PR into your default branch, you're all set! Codecov will compare coverage reports and display results in all future pull requests. Thanks for integrating Codecov - We've got you covered ☂️ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Changes
Navbar alignment — wrap header title and nav in a constrained inner div so they line up horizontally with the main content area.
Mobile layout (≤640px) — page headers stack vertically, cards scroll horizontally for wide tables, stat grid uses smaller minimum cell width, main padding reduced. Adds
sqd-grid-2utility class for responsive two-column layouts.Hamburger nav (<576px) — three-bar toggle button appears on small screens, opens a full-width absolute dropdown with vertically stacked links. No JS file required — single inline
onclickhandler.aria-expandedtoggled on open/close.Accessibility —
:focus-visiblering for keyboard navigation,role="status"/role="alert"on flash messages,aria-labelon nav landmark,aria-current="page"on active nav links,scope="col"on all table headers, visually-hidden "Actions" label on empty action columns,.sqd-sr-onlyutility class.Test plan
🤖 Generated with Claude Code