From 2fa5c8c39470acc3d06d087f0c66dc8822aa0790 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sat, 19 Sep 2026 04:54:18 +0200
Subject: [PATCH] fix(ui): nothing past the right edge of a phone

The Feed's chips + Sort + View row did not fit one line at 375px and pushed
the page 21px wide; the toast stack capped its width by the viewport while
it sits right of the sidebar. The toolbar rows (Feed, Plex browse) wrap,
and the toasts are capped by their host.
---
 frontend/src/components/Feed.tsx       | 4 +++-
 frontend/src/components/PlexBrowse.tsx | 2 +-
 frontend/src/components/ui/Toaster.tsx | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Feed.tsx b/frontend/src/components/Feed.tsx
index 21f526a3..e2b9d838 100644
--- a/frontend/src/components/Feed.tsx
+++ b/frontend/src/components/Feed.tsx
@@ -716,7 +716,9 @@ export default function Feed({
               (overflowing to a "+N"/count pill so they never crowd the controls), while Sort + View stay
               pinned to the right. Channel-scoped feeds show no chips (their baseline isn't a "filter you
               applied"), but still get the right-pinned Sort/View. */}
-          <div className="flex items-center gap-2 pb-2">
+          {/* Wraps on a phone: the chips and Sort + View did not fit one line, and the row pushed the
+              page 21px wide (prod UAT 2026-09-19). Sort + View then take a line of their own. */}
+          <div className="flex flex-wrap items-center gap-2 pb-2">
             {!channelScoped && (
               <>
                 {/* The active personal view (if any) leads the applied-filter row. */}
diff --git a/frontend/src/components/PlexBrowse.tsx b/frontend/src/components/PlexBrowse.tsx
index ba5ba96a..b0cb4f17 100644
--- a/frontend/src/components/PlexBrowse.tsx
+++ b/frontend/src/components/PlexBrowse.tsx
@@ -518,7 +518,7 @@ export default function PlexBrowse() {
           {/* The controls row sits directly above the grid: the applied-filter chips flow from the
               left (overflowing to a "+N"/count pill so they never crowd the controls), while Sort +
               the Discover/Browse toggle stay pinned to the right — the same layout as the Feed. */}
-          <div className="mt-1 flex items-center gap-2">
+          <div className="mt-1 flex flex-wrap items-center gap-2">
             {/* The active personal view (if any) leads the applied-filter row, like the feed. */}
             <SelectedViewChip />
             <ActiveFilterChips
diff --git a/frontend/src/components/ui/Toaster.tsx b/frontend/src/components/ui/Toaster.tsx
index 20a37717..2afccd73 100644
--- a/frontend/src/components/ui/Toaster.tsx
+++ b/frontend/src/components/ui/Toaster.tsx
@@ -111,11 +111,13 @@ export default function Toaster({
     // z-overlay, and catching the click — took play/pause, ±10, stop, prev/next and mute for as long
     // as a toast was up (the connection notice: until the server answered). The same rung UpNextCard
     // uses for the same reason. Clicks between the cards go through to what is underneath.
+    // Its width is capped by its HOST (100%), not the viewport: it sits in the content column, right
+    // of the sidebar, and a 100vw cap pushed it past the right edge of a phone (prod UAT 2026-09-19).
     <div
       // lib/listNav: focus on a toast's Undo is not the reader leaving the list the toast is about.
       data-toast-region=""
       aria-live={isTop && armed ? "polite" : "off"}
-      className={`absolute left-4 z-overlay flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)] ${
+      className={`absolute left-4 z-overlay flex flex-col gap-2 w-80 max-w-[calc(100%-2rem)] ${
         overlay ? "bottom-24 pointer-events-none" : "bottom-4"
       }`}
       // Inside an overlay, a click on a toast is not a click on the overlay's backdrop.