Collapse admin navbar on mobile + scroll wide tables (GH #48) - #53
Merged
Conversation
Below `lg` (1024px) the admin top-bar can't fit Surveys/ETL/GDPR/Users/ DB Credentials/My DB access alongside the user identity + Log out, so they collapse behind a hamburger that opens a stacked drawer. Same change pass also wraps every admin data table (SurveyListView, UsersView, EtlView, GdprView, PiiReviewView, MyDbAccessView, DbCredentialsView) in an `overflow-x-auto` container with a sensible `min-w-*` on the table so they scroll horizontally inside their Card on narrow screens instead of blowing out the viewport. Header/main padding also drops from `px-6` to `px-4 sm:px-6` for the same reason, and RespondentLayout gets the same treatment so the survey-runner chrome reads identically on mobile. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Improves the frontend admin and respondent layouts for small screens by collapsing the admin navigation into a mobile drawer and preventing wide admin tables from overflowing the viewport.
Changes:
- Updated
AdminLayoutto use a hamburger-triggered drawer belowlg, while keeping the role-aware desktop nav. - Wrapped all admin list/detail tables in
overflow-x-autocontainers and addedmin-w-*to tables to enable horizontal scrolling within Cards. - Reduced horizontal padding and adjusted vertical spacing in both admin and respondent shells for better mobile ergonomics.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/admin/AdminLayout.tsx | Adds mobile hamburger + drawer nav and adjusts header/main padding. |
| frontend/src/admin/AdminLayout.test.tsx | Adds tests for drawer open/close behavior and link-click closing. |
| frontend/src/admin/SurveyListView.tsx | Wraps versions table for horizontal scrolling on narrow viewports. |
| frontend/src/admin/UsersView.tsx | Wraps operators table for horizontal scrolling on narrow viewports. |
| frontend/src/admin/EtlView.tsx | Wraps ETL runs table for horizontal scrolling on narrow viewports. |
| frontend/src/admin/GdprView.tsx | Wraps withdrawals audit table for horizontal scrolling on narrow viewports. |
| frontend/src/admin/PiiReviewView.tsx | Wraps PII review queue table for horizontal scrolling on narrow viewports. |
| frontend/src/admin/MyDbAccessView.tsx | Wraps credential list table for horizontal scrolling on narrow viewports. |
| frontend/src/admin/DbCredentialsView.tsx | Wraps both requests + grants tables for horizontal scrolling on narrow viewports. |
| frontend/src/RespondentLayout.tsx | Aligns respondent shell padding/spacing with the updated mobile chrome. |
Comment on lines
+93
to
+100
| <button | ||
| type="button" | ||
| aria-label={menuOpen ? 'Close menu' : 'Open menu'} | ||
| aria-expanded={menuOpen} | ||
| aria-controls="admin-mobile-menu" | ||
| onClick={() => setMenuOpen((open) => !open)} | ||
| className="-mr-1 rounded-md p-2 text-ink hover:bg-canvas lg:hidden" | ||
| > |
Contributor
There was a problem hiding this comment.
Added focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand to the hamburger button's className, matching the focus ring used by the Button primitive.
Comment on lines
+10
to
+12
| * Below `lg` (1024px) the full nav can't fit alongside the user/logout block | ||
| * for an admin, so we collapse it behind a hamburger that opens a stacked | ||
| * drawer underneath the header. Above `lg` the drawer never renders. */ |
Contributor
There was a problem hiding this comment.
Updated the comment to clarify that the drawer is hidden at lg via CSS (lg:hidden) but may still be in the DOM if it was opened on a narrow viewport before the window was resized.
…rrect drawer comment
Resolves conflicts in frontend/src/admin/AdminLayout.tsx where main reapplied an earlier version of the GH #48 mobile navbar change without the follow-up Copilot-review fixes from this branch. Kept HEAD's corrections: - Accurate drawer comment (the lg:hidden drawer can still be in the DOM if it was opened on a narrow viewport before resize, not "never renders"). - focus-visible outline styles on the hamburger button. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
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
lg(1024px) the admin top-bar collapses behind a hamburger that opens a stacked drawer for Surveys / ETL / GDPR / Users / DB Credentials / My DB access + Log out, so the nav stops clipping the user identity on narrow screens.SurveyListView,UsersView,EtlView,GdprView,PiiReviewView,MyDbAccessView,DbCredentialsView) is wrapped in anoverflow-x-autocontainer with amin-w-*on the table, so wide tables scroll horizontally inside their Card instead of blowing out the viewport.px-4 sm:px-6andRespondentLayoutgets the same treatment so the survey-runner chrome matches.Closes GH #48.
Test plan
npm run test(frontend) — 140/140 pass, incl. newAdminLayout.test.tsx(6 tests covering drawer open/close, link click closes drawer, desktop nav visible at ≥lg)npm run lint/npm run typecheck/npm run format:check— cleanpython3 scripts/check_invariants.py/uv run ruff check .— clean/adminin a ≤375px viewport, confirm hamburger drawer behaviour and that each list view scrolls horizontally without overflowing the Card🤖 Generated with Claude Code