Collapse admin navbar on mobile + scroll wide tables (GH #48) - #52
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
Responsive admin UI polish: collapses the admin top-bar nav behind a hamburger/drawer below the lg breakpoint, makes admin data tables scroll horizontally inside their Card on narrow viewports, and tightens header/main gutters on mobile for both admin and respondent shells.
Changes:
AdminLayoutaddsmenuOpenstate, a hamburger toggle, and a mirrored drawer (nav + user + Log out) hidden atlg; nav links extracted into a shared fragment reused by desktop nav and drawer.- All seven admin data tables wrapped in
overflow-x-autowith per-tablemin-w-[…]to enable horizontal scroll inside the Card. - Header/main horizontal padding moved to mobile-first (
px-4 sm:px-6) and main vertical padding topy-6 sm:py-8in admin and respondent layouts; new AdminLayout tests cover the hamburger/drawer DOM contract and link-tap auto-close.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/admin/AdminLayout.tsx | Hamburger + mobile drawer, shared navLinks fragment, responsive header/main padding, MenuIcon SVG. |
| frontend/src/admin/AdminLayout.test.tsx | New tests for hamburger toggle (aria-expanded/name), drawer mirror nav + Log out, and drawer auto-close on link tap. |
| frontend/src/admin/SurveyListView.tsx | Wraps versions table in overflow-x-auto with min-w-[32rem]. |
| frontend/src/admin/UsersView.tsx | Wraps users table in overflow-x-auto with min-w-[44rem]. |
| frontend/src/admin/EtlView.tsx | Wraps ETL runs table in overflow-x-auto with min-w-[44rem]. |
| frontend/src/admin/GdprView.tsx | Wraps withdrawals table in overflow-x-auto with min-w-[36rem]. |
| frontend/src/admin/PiiReviewView.tsx | Wraps review queue table in overflow-x-auto with min-w-[48rem]. |
| frontend/src/admin/MyDbAccessView.tsx | Wraps credentials table in overflow-x-auto with min-w-[40rem]. |
| frontend/src/admin/DbCredentialsView.tsx | Wraps recent-requests (min-w-[40rem]) and grants (min-w-[56rem]) tables in overflow-x-auto. |
| frontend/src/RespondentLayout.tsx | Mobile-first padding: header px-4 sm:px-6, main py-6 sm:py-10. |
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 nav collapses behind a hamburger button (closes Mobile admin navbar #48). Tapping it opens a stacked drawer with the same role-filtered links plus the user identity + Log out; the drawer closes on link tap.SurveyListView,UsersView,EtlView,GdprView,PiiReviewView,MyDbAccessView,DbCredentialsView) is now wrapped inoverflow-x-autowith a per-tablemin-w-*, so on narrow viewports the table scrolls inside its Card instead of breaking the viewport.px-6topx-4 sm:px-6(admin and respondent shells), and main vertical padding topy-6 sm:py-8, so mobile gets sensible gutters without affecting desktop.Test plan
npm run lint,npx tsc --noEmit,npm run test -- --run(142 tests) all green.lg, drawer mounts/unmounts on toggle, surveys-list table scrolls horizontally inside its Card on mobile (wrapper width 356 vs. table scrollWidth 512), desktop nav inline as before.🤖 Generated with Claude Code