Conversation
Make page headers stack on mobile (flex-col sm:flex-row), reduce padding on small screens (p-3 sm:p-4 md:p-6), enforce min-h-[40px] touch targets on buttons/inputs/selects, add overflow-x-auto for tab bars and tables, and use responsive grid breakpoints (grid-cols-2 sm:grid-cols-2 lg:grid-cols-4) to avoid skipped tiers. Affected pages: Search, PathFinder, Indexer, Integrity, Audit, Favorites (global + db-scoped), BrowserSettings, Gedcom, GenealogyProviders, Reports.
There was a problem hiding this comment.
Pull request overview
Improves mobile responsiveness across key SparseTree pages by standardizing spacing, improving header layouts, increasing touch target sizes, and making tables/tabs horizontally scrollable on smaller screens.
Changes:
- Standardized responsive page padding/spacing and header layouts to avoid crowding on narrow viewports.
- Increased touch target sizes (buttons/inputs/selects/pagination) and adjusted grids for better mobile layouts.
- Added horizontal scrolling + min-width hints for tables and made tab bars scrollable.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| client/src/pages/ReportsPage.tsx | Responsive page padding, grid spacing, touch targets, and responsive output console height/font sizing. |
| client/src/pages/GenealogyProviders.tsx | Mobile-friendly header/status banner layout and standardized button sizing. |
| client/src/pages/GedcomPage.tsx | Responsive padding, two-column-to-one-column grid on mobile, and larger touch targets. |
| client/src/pages/BrowserSettingsPage.tsx | Responsive layout updates and standardized control/button sizing for mobile usability. |
| client/src/components/search/SearchPage.tsx | Responsive header + form grid updates; table now horizontally scrolls on mobile. |
| client/src/components/path/PathFinder.tsx | Responsive header/form layout, improved touch targets, and better text wrapping on mobile. |
| client/src/components/integrity/IntegrityPage.tsx | Responsive header/cards, scrollable tabs, and horizontally scrollable tables with min-width hints. |
| client/src/components/indexer/IndexerPage.tsx | Responsive layout + touch targets and a responsive output console height/font size. |
| client/src/components/favorites/FavoritesPage.tsx | Responsive header/filter layout, consistent touch targets, and improved pagination ergonomics. |
| client/src/components/favorites/DatabaseFavoritesPage.tsx | Responsive header/filter layout, consistent touch targets, and improved pagination ergonomics. |
| client/src/components/audit/AuditPage.tsx | Responsive header/config/tabs, improved filter controls and table scrolling for mobile. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className="bg-app-card rounded-lg border border-app-border overflow-x-auto"> | ||
| <table className="w-full min-w-[640px]"> |
There was a problem hiding this comment.
The results table wrapper switched from overflow-hidden to overflow-x-auto, which can cause the table header/background to ignore the container’s rounded corners (visual regression on scroll). Consider keeping an outer rounded-lg border ... overflow-hidden container and putting overflow-x-auto on an inner wrapper, or use overflow-x-auto overflow-y-hidden to preserve clipping while still enabling horizontal scroll.
| <button | ||
| onClick={() => setOutputLines([])} | ||
| className="text-xs text-app-text-muted hover:text-app-text" | ||
| className="text-xs text-app-text-muted hover:text-app-text px-2 py-1 min-h-[32px]" | ||
| > |
There was a problem hiding this comment.
PR description says touch targets were standardized to min-h-[40px] for buttons, but this new "Clear" button uses min-h-[32px]. Either bump it to 40px for consistency with the stated goal, or update the PR description to reflect the exception.
| <button | ||
| onClick={() => setEditingPort(true)} | ||
| className="text-sm text-app-accent hover:underline" | ||
| className="text-sm text-app-accent hover:underline px-2 py-1 min-h-[32px]" | ||
| > |
There was a problem hiding this comment.
PR description claims all buttons were updated to min-h-[40px] touch targets, but the new "Edit" button styling sets min-h-[32px]. Consider using 40px here as well (or update the PR description if 32px is intentional for inline actions).
- Fix overflow-x-auto on SearchPage table wrapper losing rounded corners (wrap table in inner overflow-x-auto div, keep outer overflow-hidden) - Bump Clear button (ReportsPage) and Edit button (BrowserSettingsPage) to min-h-[40px] for consistent touch targets
atomantic
deleted the
cos/app-improve-2eeb4b29-6e35-49ad-a2fc-4b2b87a72572-mobile-responsive-moi7ltz4/agent-84d5b4e0
branch
Automated PR created by PortOS Chief of Staff.
Summary
Improved mobile responsiveness across 11 SparseTree pages. The build passes; commit
90e7d1ais pushed.What changed:
p-3 sm:p-4 md:p-6everywhere (wasp-6flat)flex items-center justify-betweentoflex-col sm:flex-rowso titles + actions don't crowd on narrow screensmin-h-[40px]on all buttons, inputs, selects, and pagination controls (per global preference)overflow-x-autowrappers withmin-w-[…]hints so columns don't squeeze illegibly on mobilewhitespace-nowrapgrid-cols-2 sm:grid-cols-2 lg:grid-cols-4for summary cards,sm:grid-cols-2 lg:grid-cols-3for card lists,md:grid-cols-2 lg:grid-cols-3for indexer panels400pxheight with responsiveh-[260px] sm:h-[320px] md:h-[400px]and smaller font on mobileFiles: AuditPage, IntegrityPage, SearchPage, PathFinder, IndexerPage, FavoritesPage, DatabaseFavoritesPage, BrowserSettingsPage, GedcomPage, GenealogyProviders, ReportsPage. Dashboard, AncestryTreeView, PersonDetail, TreeStatsPage already had proper responsive styling.