feat(frontend): responsive stats grid and recently viewed improvements (#706)#741
feat(frontend): responsive stats grid and recently viewed improvements (#706)#741ericsocrat merged 3 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Improves the dashboard’s mobile responsiveness by adjusting the stats grid layout and making the “Recently viewed” section easier to browse on small screens, while adding a “View all” navigation affordance.
Changes:
- Updated the stats grid to use a 2-column layout on mobile and 4 columns on larger breakpoints.
- Added a “View all →” link to the Recently Viewed header (links to
/app/search). - Switched Recently Viewed items to a horizontal, snap-scrolling list on mobile, reverting to a vertical list at
sm:.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
frontend/src/app/app/page.tsx |
Makes stats grid responsive; adds “View all” link; converts recently viewed list to horizontal scroll on mobile. |
frontend/src/app/app/page.test.tsx |
Updates/adds tests to assert responsive grid classes, “View all” link, and horizontal scroll container. |
Bundle Size Report
✅ Bundle size is within acceptable limits. |
| </h2> | ||
| <Link | ||
| href="/app/search" | ||
| className="text-sm font-medium text-brand-primary hover:underline" |
There was a problem hiding this comment.
The “View all” link only has a hover style; keyboard users won’t get an equivalent focus affordance. Consider adding a focus-visible: style (e.g., underline and/or focus ring) so the link is clearly visible when tabbed to.
| className="text-sm font-medium text-brand-primary hover:underline" | |
| className="text-sm font-medium text-brand-primary hover:underline focus-visible:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-brand-primary" |
| subtitle={new Date(p.viewed_at).toLocaleDateString()} | ||
| allergenWarnings={allergenMap[p.product_id] ?? []} | ||
| /> | ||
| <div key={p.product_id} className="min-w-[280px] flex-shrink-0 snap-start sm:min-w-0 sm:flex-shrink"> |
There was a problem hiding this comment.
The responsive class sm:flex-shrink may not exist depending on the Tailwind version/config (common utilities are shrink / shrink-0 in newer Tailwind). If it’s not recognized, flex-shrink-0 will remain in effect at sm: and up. Use the project’s standard shrink utility (e.g., sm:shrink) or otherwise ensure the responsive override is a valid Tailwind class.
| <div key={p.product_id} className="min-w-[280px] flex-shrink-0 snap-start sm:min-w-0 sm:flex-shrink"> | |
| <div key={p.product_id} className="min-w-[280px] flex-shrink-0 snap-start sm:min-w-0 sm:shrink"> |
| it("renders 'View all' link in recently viewed section", async () => { | ||
| render(<DashboardPage />, { wrapper: createWrapper() }); | ||
| await waitFor(() => { | ||
| expect(screen.getByText(/Recently Viewed/)).toBeInTheDocument(); | ||
| }); | ||
| const viewAllLink = screen.getByText("View all →").closest("a"); | ||
| expect(viewAllLink).toHaveAttribute("href", "/app/search"); | ||
| }); |
There was a problem hiding this comment.
getByText(...).closest("a") is brittle and can yield null (leading to less clear failures) if the markup changes (e.g., the text is wrapped/split). Prefer querying the anchor directly via getByRole("link", { name: "View all →" }) (or a case-insensitive regex name) to make the test more robust and readable.
Summary
Closes #706 — Makes the dashboard responsive for mobile and adds a "View all" link with horizontal scrolling for the recently viewed section.
Changes
Stats Grid (responsive)
grid-cols-4togrid-cols-2 gap-2 sm:grid-cols-4 sm:gap-3— 2 columns on mobile, 4 on desktopRecently Viewed Section
dashboard.viewAlli18n key, links to/app/search)flex overflow-x-auto snap-x snap-mandatory) withmin-w-[280px]cardssm:breakpoint (sm:flex-col sm:overflow-visible)Already Complete (no changes needed)
grid-cols-2 sm:grid-cols-4)EmptyDashboardcomponent already exists with scan + browse CTAsDashboardGreetingcomponent already existsdashboard.viewAllalready present in en/pl/deVerification
Tests Added/Updated
grid-cols-2andsm:grid-cols-4overflow-x-autoandsnap-xclassesFiles Changed
frontend/src/app/app/page.tsxfrontend/src/app/app/page.test.tsx