fix(frontend): prevent category chip clipping under scroll-fade mask (#974)

[ericsocrat]

Summary

Fixes #974 — the first category chip in the horizontal scroll was being clipped by the scroll-fade-x CSS mask gradient on mobile. "Baby Food" appeared as "y Food".

Root Cause

The scroll-fade-x utility applies a mask-image gradient that fades from transparent → black over the first 1.5rem. Since the <ul> had no left padding, the first chip sat directly under this transparent zone and was visually clipped.

Fix

Add px-4 (1rem horizontal padding) to the scroll container so content starts after the fade zone, with compensating -mx-4 negative margin so the container still bleeds to screen edges. Both are reset on lg: breakpoint (lg:mx-0 lg:px-0) where the grid layout replaces horizontal scroll.

Before: First category chip cut off under fade mask
After: Full chip visible with natural fade-in from edge

Changes

File	Change
CategoriesBrowse.tsx	Added -mx-4 px-4 lg:mx-0 lg:px-0 to scroll <ul>
CategoriesBrowse.test.tsx	Added test asserting anti-clipping padding classes

Verification

npx tsc --noEmit          → 0 errors
npx vitest run            → 5,864 passed | 0 failures | 352 files
CategoriesBrowse tests    → 7/7 passed (6 existing + 1 new)

Test Added

• "scroll container has padding to prevent clipping under fade mask" — asserts px-4 and -mx-4 classes on the list element

Part of Epic #972 — Dashboard UI/UX Polish

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tryvit	Ready	Preview, Comment	Mar 19, 2026 9:11pm

[Copilot]

Pull request overview

This PR fixes a mobile visual bug where the first category chip in CategoriesBrowse was clipped by the scroll-fade-x mask gradient by adding horizontal padding to the scroll container while preserving edge-to-edge layout via compensating negative margins.

Changes:

• Add -mx-4 px-4 to the horizontally scrollable <ul> and reset those at lg: where the layout switches to a grid.
• Add a unit test asserting the scroll container includes the anti-clipping padding/margin classes.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
frontend/src/components/dashboard/CategoriesBrowse.tsx	Adds padding and negative margins to ensure the first chip doesn’t sit under the fade mask on mobile while keeping the container edge-to-edge.
frontend/src/components/dashboard/CategoriesBrowse.test.tsx	Adds a regression test to assert the presence of the new padding/margin classes on the scroll list.

[github-actions]

Bundle Size Report

Metric	Value
Main baseline	0 KB
This PR	0 KB
Delta	✅ +0 KB (+0%)
JS chunks	0
Hard limit	4000 KB

✅ Bundle size is within acceptable limits.