fix(frontend): remove global overflow-x-hidden and hide breadcrumbs on mobile by ericsocrat · Pull Request #736 · ericsocrat/tryvit

ericsocrat · 2026-03-07T21:09:29Z

Summary

Closes #697

Removes the global overflow-x-hidden from the app layout that was clipping horizontal scroll containers, hides breadcrumbs on mobile to save vertical space, and adds fade-edge scroll indicators to signal scrollable content.

Changes

1. Remove global `overflow-x-hidden` (layout.tsx)

Removed overflow-x-hidden from both the outer flex container and the inner content div
The inner div retains max-w-full to prevent layout blowout without clipping scroll containers

2. Hide breadcrumbs on mobile (Breadcrumbs.tsx)

Added hidden md:block classes to the <nav> element
Breadcrumbs are now hidden on screens < 768px, freeing up vertical space on mobile
Cascades to all 20+ pages using the component — no per-page changes needed

3. Fade-edge scroll indicators (globals.css + CategoriesBrowse + SettingsNav)

Added scroll-fade-x CSS utility using mask-image gradient for left/right fade edges
Added responsive md:scroll-fade-none and lg:scroll-fade-none variants to disable on larger screens
Applied to CategoriesBrowse (fades on mobile, grid on lg) and SettingsNav (fades on mobile, normal on md+)

Files Changed

File	Change
`frontend/src/app/app/layout.tsx`	Remove 2× `overflow-x-hidden`
`frontend/src/components/layout/Breadcrumbs.tsx`	Add `hidden md:block`
`frontend/src/components/layout/Breadcrumbs.test.tsx`	+1 test for mobile hidden behavior
`frontend/src/components/dashboard/CategoriesBrowse.tsx`	Add `scroll-fade-x lg:scroll-fade-none`
`frontend/src/components/settings/SettingsNav.tsx`	Add `scroll-fade-x md:scroll-fade-none`
`frontend/src/styles/globals.css`	+32 lines: fade-edge scroll CSS utility

Verification

npx tsc --noEmit          → 0 errors
npx vitest run            → 5,119/5,119 tests pass (305 suites, 0 failures)
Breadcrumbs.test.tsx      → 11/11 pass (+1 new test)

…obile, add fade-edge scroll indicators

vercel · 2026-03-07T21:09:33Z

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

Project	Deployment	Actions	Updated (UTC)
tryvit	Ready	Preview, Comment	Mar 8, 2026 9:59am

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 4fb32c710c

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-03-07T21:11:51Z

frontend/src/styles/globals.css

+    transparent,
+    black 1.5rem,
+    black calc(100% - 1.5rem),
+    transparent


Avoid clipping edge items with scroll fade mask

The new .scroll-fade-x utility always applies transparent regions at both horizontal edges, which means the first and last 1.5rem of content are permanently masked. In the updated mobile uses (SettingsNav and CategoriesBrowse), those scroll containers do not add compensating side padding, so edge tab/chip labels and icons are visually cut off even when at the start/end (or when the row does not overflow), which is a user-visible regression in readability and affordance.

Useful? React with 👍 / 👎.

Copilot

Pull request overview

This PR fixes horizontal scroll containers being clipped by a global overflow-x-hidden rule, hides breadcrumbs on mobile to save vertical space, and adds CSS fade-edge indicators to signal scrollable content.

Changes:

Removed overflow-x-hidden from both the outer flex container and inner content div in the app layout, allowing horizontal scroll containers (carousels, chips) to work properly
Added hidden md:block to the Breadcrumbs component to hide breadcrumbs on mobile screens, with a corresponding test
Added a scroll-fade-x CSS utility with responsive reset variants (md:scroll-fade-none, lg:scroll-fade-none) and applied it to CategoriesBrowse and SettingsNav

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
`frontend/src/app/app/layout.tsx`	Removed two `overflow-x-hidden` classes from root layout containers
`frontend/src/components/layout/Breadcrumbs.tsx`	Added `hidden md:block` to hide breadcrumbs on screens < 768px
`frontend/src/components/layout/Breadcrumbs.test.tsx`	Added test verifying mobile-hidden classes are present
`frontend/src/components/dashboard/CategoriesBrowse.tsx`	Applied `scroll-fade-x lg:scroll-fade-none` to the scrollable category list
`frontend/src/components/settings/SettingsNav.tsx`	Applied `scroll-fade-x md:scroll-fade-none` to the tab navigation
`frontend/src/styles/globals.css`	Added `scroll-fade-x` CSS utility and responsive reset variants

Copilot · 2026-03-07T21:13:05Z

frontend/src/styles/globals.css

+.scroll-fade-x {
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 1.5rem,
+    black calc(100% - 1.5rem),
+    transparent
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 1.5rem,
+    black calc(100% - 1.5rem),
+    transparent
+  );
+}


The scroll-fade-x mask is static — it always fades both edges regardless of scroll position. When the container is scrolled to the very start, the leftmost content will still be partially masked even though there's nothing further to the left. Similarly, when scrolled to the end, the rightmost item is faded.

Consider adding horizontal padding to the scroll containers (e.g., px-6) so the 1.5rem fade region overlaps the padding rather than the content. This would ensure items are fully visible at the scroll extremes while still showing the fade effect in the middle of the scroll range.

github-actions · 2026-03-07T21:13:10Z

Bundle Size Report

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

✅ Bundle size is within acceptable limits.

…ia labels

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Copilot · 2026-03-08T09:18:53Z

frontend/src/components/layout/Breadcrumbs.tsx


  return (
-    <nav aria-label={t("a11y.breadcrumb")} className="mb-3">
+    <nav aria-label={t("a11y.breadcrumb")} className="mb-3 hidden md:block">


Hiding the breadcrumb navigation entirely on mobile with hidden means screen reader users on mobile devices lose access to breadcrumb navigation. Consider using a visually-hidden approach (e.g. sr-only) or keeping the nav accessible to assistive technologies while only visually hiding it, so mobile screen reader users can still orient themselves within the page hierarchy.

Suggested change

<nav aria-label={t("a11y.breadcrumb")} className="mb-3 hidden md:block">

<nav

aria-label={t("a11y.breadcrumb")}

className="mb-3 sr-only md:not-sr-only md:block"

>

Copilot · 2026-03-08T09:18:53Z

frontend/src/components/layout/Breadcrumbs.test.tsx

+    expect(nav.className).toContain("hidden");
+    expect(nav.className).toContain("md:block");


This test asserts on specific CSS class name strings rather than testing behavior. It's essentially testing implementation details (that certain Tailwind classes are present) rather than the actual rendering outcome. Since JSDOM doesn't apply CSS media queries, truly testing the mobile-hidden behavior isn't possible here anyway. If the intent is just to guard against accidental class removal, consider using toHaveClass('hidden', 'md:block') from @testing-library/jest-dom for a cleaner assertion, but be aware this remains an implementation-detail test.

Suggested change

expect(nav.className).toContain("hidden");

expect(nav.className).toContain("md:block");

expect(nav).toHaveClass("hidden");

expect(nav).toHaveClass("md:block");

Copilot · 2026-03-08T09:18:54Z

frontend/src/styles/globals.css

+/* ── Fade-edge scroll indicator ── */
+.scroll-fade-x {
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 1.5rem,
+    black calc(100% - 1.5rem),
+    transparent
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 1.5rem,
+    black calc(100% - 1.5rem),
+    transparent
+  );
+}


The permanent fade masks on both edges can clip the first and last items even when the container is not scrolled (or is scrolled all the way). Consider adding a brief comment noting this intentional trade-off, or mentioning that a JS-based approach could conditionally show/hide each edge fade based on scroll position.

fix(frontend): remove global overflow-x-hidden, hide breadcrumbs on m…

4fb32c7

…obile, add fade-edge scroll indicators

Copilot AI review requested due to automatic review settings March 7, 2026 21:09

Copilot started reviewing on behalf of ericsocrat March 7, 2026 21:09 View session

vercel bot deployed to Preview March 7, 2026 21:11 View deployment

chatgpt-codex-connector bot reviewed Mar 7, 2026

View reviewed changes

Copilot AI reviewed Mar 7, 2026

View reviewed changes

Merge branch 'main' into fix/697-remove-overflow-x-hidden

24de44c

vercel bot deployed to Preview March 8, 2026 09:13 View deployment

fix(merge): resolve conflicts — keep overflow-x fixes + translated ar…

ea9bea8

…ia labels

Copilot AI review requested due to automatic review settings March 8, 2026 09:14

Copilot AI reviewed Mar 8, 2026

View reviewed changes

Copilot started reviewing on behalf of ericsocrat March 8, 2026 09:26 View session

ericsocrat merged commit ed0d41c into main Mar 8, 2026
18 of 20 checks passed

ericsocrat deleted the fix/697-remove-overflow-x-hidden branch March 8, 2026 09:32

vercel bot deployed to Preview March 8, 2026 09:59 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(frontend): remove global overflow-x-hidden and hide breadcrumbs on mobile#736

fix(frontend): remove global overflow-x-hidden and hide breadcrumbs on mobile#736
ericsocrat merged 3 commits intomainfrom
fix/697-remove-overflow-x-hidden

ericsocrat commented Mar 7, 2026

Uh oh!

vercel bot commented Mar 7, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

chatgpt-codex-connector bot Mar 7, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 7, 2026

Uh oh!

github-actions bot commented Mar 7, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 8, 2026

Uh oh!

Copilot AI Mar 8, 2026

Uh oh!

Copilot AI Mar 8, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		expect(nav.className).toContain("hidden");
		expect(nav.className).toContain("md:block");

Conversation

ericsocrat commented Mar 7, 2026

Summary

Changes

1. Remove global overflow-x-hidden (layout.tsx)

2. Hide breadcrumbs on mobile (Breadcrumbs.tsx)

3. Fade-edge scroll indicators (globals.css + CategoriesBrowse + SettingsNav)

Files Changed

Verification

Uh oh!

vercel bot commented Mar 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector bot Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Size Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

1. Remove global `overflow-x-hidden` (layout.tsx)

vercel bot commented Mar 7, 2026 •

edited

Loading

github-actions bot commented Mar 7, 2026 •

edited

Loading