From 1a69309939470c42762751c0bfe225480844c82e Mon Sep 17 00:00:00 2001
From: Ian Chesal <ian.chesal@gmail.com>
Date: Sun, 19 Apr 2026 02:07:06 +0000
Subject: [PATCH 1/9] fix(mobile): add StreamingRefreshButton to mobile menu;
 fix empty-state copy

---
 src/app/watchlist/page.tsx       | 2 +-
 src/components/mobile-header.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/watchlist/page.tsx b/src/app/watchlist/page.tsx
index cdf416e..ac855ee 100644
--- a/src/app/watchlist/page.tsx
+++ b/src/app/watchlist/page.tsx
@@ -177,7 +177,7 @@ export default function WatchlistPage() {
                   ? 'Configure your streaming services in Settings'
                   : search || activeFilter
                   ? 'Try clearing the search or filter'
-                  : 'Add some from the sidebar'}
+                  : 'Tap ➕ below to add your first film'}
               </p>
             </div>
           )}
diff --git a/src/components/mobile-header.tsx b/src/components/mobile-header.tsx
index 0537f6f..4b992f5 100644
--- a/src/components/mobile-header.tsx
+++ b/src/components/mobile-header.tsx
@@ -7,7 +7,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet'
-import { PlexSyncButton, AskClaudeLink } from './sidebar-utils'
+import { PlexSyncButton, AskClaudeLink, StreamingRefreshButton } from './sidebar-utils'
 
 export function MobileHeader() {
   const [open, setOpen] = useState(false)
@@ -56,6 +56,7 @@ export function MobileHeader() {
               <span>Browse IMDB</span>
             </a>
             <PlexSyncButton />
+            <StreamingRefreshButton />
             <AskClaudeLink />
             <Link
               href="/settings"

From 8081fed1cab510d67209eaf42ba52f1efa5b0782 Mon Sep 17 00:00:00 2001
From: Ian Chesal <ian.chesal@gmail.com>
Date: Sun, 19 Apr 2026 02:08:41 +0000
Subject: [PATCH 2/9] fix(mobile): add inputMode=url to URL input; center Add
 page container

---
 src/app/add/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/add/page.tsx b/src/app/add/page.tsx
index d155d5f..6216dfd 100644
--- a/src/app/add/page.tsx
+++ b/src/app/add/page.tsx
@@ -57,7 +57,7 @@ export default function AddMoviePage() {
   }
 
   return (
-    <div className="p-6 max-w-lg">
+    <div className="p-6 max-w-lg mx-auto">
       <h1 className="text-2xl font-bold text-amber-900 mb-6">Add a Movie</h1>
 
       <div className="flex gap-2 mb-2">
@@ -66,6 +66,7 @@ export default function AddMoviePage() {
           value={url}
           onChange={(e) => setUrl(e.target.value)}
           onKeyDown={(e) => e.key === 'Enter' && handlePreview()}
+          inputMode="url"
           className="border-amber-300 focus:ring-amber-400"
         />
         <Button

From a8143a924569c4548aa444dad8367c666f056947 Mon Sep 17 00:00:00 2001
From: Ian Chesal <ian.chesal@gmail.com>
Date: Sun, 19 Apr 2026 02:10:25 +0000
Subject: [PATCH 3/9] fix(mobile): increase action button touch targets to h-9;
 fix delete tap area; bump logos to 20px

---
 src/components/movie-row.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/movie-row.tsx b/src/components/movie-row.tsx
index 8c95374..1f0832d 100644
--- a/src/components/movie-row.tsx
+++ b/src/components/movie-row.tsx
@@ -123,8 +123,8 @@ export function MovieRow({
                 src={`/streaming-logos/${p.providerId}.png`}
                 alt={p.providerName}
                 title={p.providerName}
-                width={16}
-                height={16}
+                width={20}
+                height={20}
                 className="rounded-sm object-contain"
                 onError={(e) => {
                   (e.target as HTMLImageElement).style.display = "none"
@@ -145,12 +145,12 @@ export function MovieRow({
         </div>
 
         {/* Actions — single row */}
-        <div className="flex items-center gap-1.5 flex-shrink-0">
+        <div className="flex items-center gap-1.5 flex-shrink-0 justify-end">
           {isStreamable ? (
             <>
               <Button
                 size="sm"
-                className="h-6 text-xs bg-amber-600 hover:bg-amber-700 text-white"
+                className="text-xs bg-amber-600 hover:bg-amber-700 text-white"
                 onClick={() => onMarkWatched(movie)}
               >
                 Mark Watched
@@ -158,7 +158,7 @@ export function MovieRow({
               <Button
                 size="sm"
                 variant="outline"
-                className="h-6 text-xs border-amber-300 text-amber-700 hover:bg-amber-50"
+                className="text-xs border-amber-300 text-amber-700 hover:bg-amber-50"
                 onClick={() => onForceDownload(movie.id)}
               >
                 Download Now
@@ -167,7 +167,7 @@ export function MovieRow({
           ) : movie.seerrStatus === "available" ? (
             <Button
               size="sm"
-              className="h-6 text-xs bg-amber-600 hover:bg-amber-700 text-white"
+              className="text-xs bg-amber-600 hover:bg-amber-700 text-white"
               onClick={() => onMarkWatched(movie)}
             >
               Mark Watched
@@ -177,7 +177,7 @@ export function MovieRow({
             <Button
               size="sm"
               variant="outline"
-              className="h-6 text-xs border-amber-300 text-amber-700 hover:bg-amber-50"
+              className="text-xs border-amber-300 text-amber-700 hover:bg-amber-50"
               onClick={() => onForceDownload(movie.id)}
             >
               Download Now
@@ -189,7 +189,7 @@ export function MovieRow({
               <Button
                 size="sm"
                 variant="outline"
-                className="h-6 text-xs border-red-300 text-red-600 hover:bg-red-50"
+                className="text-xs border-red-300 text-red-600 hover:bg-red-50"
                 onClick={handleConfirmRemove}
               >
                 Remove
@@ -197,7 +197,7 @@ export function MovieRow({
               <Button
                 size="sm"
                 variant="outline"
-                className="h-6 text-xs border-stone-200 text-stone-400 hover:bg-stone-50"
+                className="text-xs border-stone-200 text-stone-400 hover:bg-stone-50"
                 onClick={() => setConfirming(false)}
               >
                 Cancel
@@ -206,7 +206,7 @@ export function MovieRow({
           ) : (
             <button
               onClick={() => setConfirming(true)}
-              className="text-stone-300 hover:text-red-400 text-xs transition-colors"
+              className="w-9 h-9 flex items-center justify-center text-stone-300 hover:text-red-400 text-xs transition-colors"
               aria-label="Remove from list"
             >
               ✕

From 9f3b8045f0501226f88757d2763a20b66dea9ac9 Mon Sep 17 00:00:00 2001
From: Ian Chesal <ian.chesal@gmail.com>
Date: Sun, 19 Apr 2026 02:13:48 +0000
Subject: [PATCH 4/9] fix(mobile): responsive two-row layout for MovieRow on
 narrow screens

---
 src/components/movie-row.tsx | 138 ++++++++++++++++++-----------------
 1 file changed, 70 insertions(+), 68 deletions(-)

diff --git a/src/components/movie-row.tsx b/src/components/movie-row.tsx
index 1f0832d..3e9101a 100644
--- a/src/components/movie-row.tsx
+++ b/src/components/movie-row.tsx
@@ -68,79 +68,81 @@ export function MovieRow({
 
   return (
     <>
-      <div className="flex items-center gap-3 bg-white border border-amber-200 rounded-xl px-4 py-3 mb-2 shadow-sm">
-        {/* Position */}
-        <span className="text-amber-700 font-bold text-sm w-5 text-center flex-shrink-0">
-          {position}
-        </span>
+      <div className="flex flex-col sm:flex-row sm:items-center gap-y-2 bg-white border border-amber-200 rounded-xl px-4 py-3 mb-2 shadow-sm">
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          {/* Position */}
+          <span className="text-amber-700 font-bold text-sm w-5 text-center flex-shrink-0">
+            {position}
+          </span>
 
-        {/* Poster */}
-        <div className="flex-shrink-0">
-          <MoviePoster posterUrl={movie.posterUrl} title={movie.title} size="sm" />
-        </div>
-
-        {/* Info — title, year, pills, streaming */}
-        <div className="flex-1 min-w-0">
-          <p className="font-semibold text-stone-900 text-sm truncate">
-            {movie.title}
-          </p>
-          <div className="text-stone-400 text-xs flex items-center gap-1.5">
-            <span>
-              {movie.year} · {formatRuntime(movie.runtime)}
-            </span>
-            {seerrUrl && (
-              <a
-                href={`${seerrUrl}/movie/${movie.tmdbId}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-amber-500 hover:text-amber-700 transition-colors"
-                title="View in Seerr"
-              >
-                ↗
-              </a>
-            )}
+          {/* Poster */}
+          <div className="flex-shrink-0">
+            <MoviePoster posterUrl={movie.posterUrl} title={movie.title} size="sm" />
           </div>
 
-          {/* Status pills + streaming info live here */}
-          <div className="flex items-center gap-1.5 mt-1.5 flex-wrap">
-            {isStreamable && (
-              <span className="rounded-full border px-2 py-0.5 text-xs font-semibold bg-green-50 text-green-700 border-green-200">
-                Streaming
+          {/* Info — title, year, pills, streaming */}
+          <div className="flex-1 min-w-0">
+            <p className="font-semibold text-stone-900 text-sm truncate">
+              {movie.title}
+            </p>
+            <div className="text-stone-400 text-xs flex items-center gap-1.5">
+              <span>
+                {movie.year} · {formatRuntime(movie.runtime)}
               </span>
-            )}
-            {isCheckingStreaming && (
-              <span className="rounded-full border px-2 py-0.5 text-xs font-semibold bg-amber-50 text-amber-500 border-amber-200">
-                Checking…
+              {seerrUrl && (
+                <a
+                  href={`${seerrUrl}/movie/${movie.tmdbId}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-amber-500 hover:text-amber-700 transition-colors"
+                  title="View in Seerr"
+                >
+                  ↗
+                </a>
+              )}
+            </div>
+
+            {/* Status pills + streaming info live here */}
+            <div className="flex items-center gap-1.5 mt-1.5 flex-wrap">
+              {isStreamable && (
+                <span className="rounded-full border px-2 py-0.5 text-xs font-semibold bg-green-50 text-green-700 border-green-200">
+                  Streaming
+                </span>
+              )}
+              {isCheckingStreaming && (
+                <span className="rounded-full border px-2 py-0.5 text-xs font-semibold bg-amber-50 text-amber-500 border-amber-200">
+                  Checking…
+                </span>
+              )}
+              <span className={`rounded-full border px-2 py-0.5 text-xs font-semibold ${seerrPillClass}`}>
+                {SEERR_LABEL[movie.seerrStatus] ?? movie.seerrStatus}
               </span>
-            )}
-            <span className={`rounded-full border px-2 py-0.5 text-xs font-semibold ${seerrPillClass}`}>
-              {SEERR_LABEL[movie.seerrStatus] ?? movie.seerrStatus}
-            </span>
-            {isStreamable && streamingProviders.map((p) => (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                key={p.providerId}
-                src={`/streaming-logos/${p.providerId}.png`}
-                alt={p.providerName}
-                title={p.providerName}
-                width={20}
-                height={20}
-                className="rounded-sm object-contain"
-                onError={(e) => {
-                  (e.target as HTMLImageElement).style.display = "none"
-                }}
-              />
-            ))}
-            {isStreamable && streamingLink && (
-              <a
-                href={streamingLink}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="rounded border border-amber-400 bg-white text-amber-700 px-2 py-0.5 text-xs font-medium hover:bg-amber-50 transition-colors"
-              >
-                Watch ↗
-              </a>
-            )}
+              {isStreamable && streamingProviders.map((p) => (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  key={p.providerId}
+                  src={`/streaming-logos/${p.providerId}.png`}
+                  alt={p.providerName}
+                  title={p.providerName}
+                  width={20}
+                  height={20}
+                  className="rounded-sm object-contain"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none"
+                  }}
+                />
+              ))}
+              {isStreamable && streamingLink && (
+                <a
+                  href={streamingLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="rounded border border-amber-400 bg-white text-amber-700 px-2 py-0.5 text-xs font-medium hover:bg-amber-50 transition-colors"
+                >
+                  Watch ↗
+                </a>
+              )}
+            </div>
           </div>
         </div>
 

From b28cf0a80d5cc385c4a4e7a5a34879ffb4731dbb Mon Sep 17 00:00:00 2001
From: Ian Chesal <ian.chesal@gmail.com>
Date: Sun, 19 Apr 2026 02:17:25 +0000
Subject: [PATCH 5/9] fix(mobile): stack review grid on mobile; increase footer
 edit button tap targets

---
 src/components/movie-review-modal.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/movie-review-modal.tsx b/src/components/movie-review-modal.tsx
index 8f68b88..2ec3819 100644
--- a/src/components/movie-review-modal.tsx
+++ b/src/components/movie-review-modal.tsx
@@ -78,25 +78,25 @@ export function MovieReviewModal({
         {ratings.length === 0 ? (
           <p className="text-sm text-stone-400 italic text-center py-6">No reviews yet</p>
         ) : (
-          <div className="grid grid-cols-2 gap-3 py-2">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 py-2">
             {renderReviewPanel('user1', r1)}
             {renderReviewPanel('user2', r2)}
           </div>
         )}
 
-        <DialogFooter className="flex-row justify-between gap-2 sm:justify-between">
-          <div className="flex gap-3">
+        <DialogFooter className="flex-col gap-2 sm:flex-row sm:justify-between">
+          <div className="flex gap-3 flex-wrap">
             <button
               type="button"
               onClick={() => onEditUser('user1')}
-              className="text-xs text-stone-400 hover:text-amber-600 transition-colors"
+              className="text-sm min-h-[44px] flex items-center text-stone-400 hover:text-amber-600 transition-colors"
             >
               Edit {userNames.user1}&apos;s review
             </button>
             <button
               type="button"
               onClick={() => onEditUser('user2')}
-              className="text-xs text-stone-400 hover:text-amber-600 transition-colors"
+              className="text-sm min-h-[44px] flex items-center text-stone-400 hover:text-amber-600 transition-colors"
             >
               Edit {userNames.user2}&apos;s review
             </button>

From 1da069b3ad2d0751699a20829fbdadb26626aae7 Mon Sep 17 00:00:00 2001
From: Ian Chesal <ian.chesal@gmail.com>
Date: Sun, 19 Apr 2026 02:20:26 +0000
Subject: [PATCH 6/9] fix(mobile): improve bottom nav active state contrast and
 add dot indicator

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/mobile-bottom-nav.tsx | 10 ++++++++--
 tests/mobile-bottom-nav.test.tsx     | 11 ++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/mobile-bottom-nav.tsx b/src/components/mobile-bottom-nav.tsx
index 47119da..ff51fcc 100644
--- a/src/components/mobile-bottom-nav.tsx
+++ b/src/components/mobile-bottom-nav.tsx
@@ -24,14 +24,14 @@ export function MobileBottomNav() {
           href={href}
           className={cn(
             'flex flex-col items-center pt-2 pb-1 px-3 text-xs font-medium transition-colors min-w-0',
-            pathname === href ? 'text-amber-600' : 'text-amber-800'
+            pathname === href ? 'text-amber-700' : 'text-stone-500'
           )}
         >
           <span
             aria-hidden="true"
             className={cn(
               'text-xl mb-0.5 px-3 py-0.5 rounded-full',
-              pathname === href ? 'bg-amber-600' : ''
+              pathname === href ? 'bg-amber-700' : ''
             )}
           >
             {icon}
@@ -39,6 +39,12 @@ export function MobileBottomNav() {
           <span className={cn(pathname === href ? 'font-bold' : 'font-medium')}>
             {label}
           </span>
+          <span
+            className={cn(
+              'h-1 w-5 rounded-full mt-0.5 transition-colors',
+              pathname === href ? 'bg-amber-600' : 'invisible'
+            )}
+          />
         </Link>
       ))}
     </nav>
diff --git a/tests/mobile-bottom-nav.test.tsx b/tests/mobile-bottom-nav.test.tsx
index 4bed0cd..ba7747f 100644
--- a/tests/mobile-bottom-nav.test.tsx
+++ b/tests/mobile-bottom-nav.test.tsx
@@ -33,20 +33,21 @@ describe('MobileBottomNav', () => {
   it('highlights the active tab', () => {
     render(<MobileBottomNav />)
     const listLink = screen.getByRole('link', { name: /list/i })
-    expect(listLink).toHaveClass('text-amber-600')
+    expect(listLink).toHaveClass('text-amber-700')
     const iconSpan = listLink.querySelector('span')
-    expect(iconSpan).toHaveClass('bg-amber-600')
+    expect(iconSpan).toHaveClass('bg-amber-700')
     const watchedLink = screen.getByRole('link', { name: /watched/i })
-    expect(watchedLink).not.toHaveClass('text-amber-600')
+    expect(watchedLink).not.toHaveClass('text-amber-700')
     const inactiveIconSpan = watchedLink.querySelector('span')
-    expect(inactiveIconSpan).not.toHaveClass('bg-amber-600')
+    expect(inactiveIconSpan).not.toHaveClass('bg-amber-700')
   })
 
   it('applies bold font weight to the active tab label', () => {
     render(<MobileBottomNav />)
     const listLink = screen.getByRole('link', { name: /list/i })
     const spans = listLink.querySelectorAll('span')
-    const labelSpan = spans[spans.length - 1]
+    // spans[0] = icon (aria-hidden), spans[1] = label, spans[2] = dot indicator
+    const labelSpan = spans[1]
     expect(labelSpan).toHaveClass('font-bold')
   })
 

From 64ce6b736c2ccf4371c7cf90097755ec09efcc70 Mon Sep 17 00:00:00 2001
From: Ian Chesal <ian.chesal@gmail.com>
Date: Sun, 19 Apr 2026 02:22:32 +0000
Subject: [PATCH 7/9] fix(mobile): horizontal scroll for filter pills on narrow
 screens

---
 src/app/globals.css           | 8 ++++++++
 src/components/filter-bar.tsx | 8 ++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index ee5cc9a..df1e4da 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -22,3 +22,11 @@
 body {
   @apply bg-amber-50 text-stone-900;
 }
+
+.scrollbar-hide {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
diff --git a/src/components/filter-bar.tsx b/src/components/filter-bar.tsx
index 3d977b5..a671e65 100644
--- a/src/components/filter-bar.tsx
+++ b/src/components/filter-bar.tsx
@@ -39,10 +39,10 @@ export function FilterBar({
         aria-label="Search titles"
         className="w-full rounded-lg border border-amber-200 bg-white px-3 py-2 text-sm text-stone-800 placeholder-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-300"
       />
-      <div className="flex flex-wrap gap-1.5">
+      <div className="flex gap-1.5 overflow-x-auto scrollbar-hide pb-1 sm:flex-wrap sm:overflow-visible">
         <button
           onClick={() => onButtonChange(null)}
-          className={`rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
+          className={`flex-shrink-0 rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
             activeButton === null
               ? 'border-amber-500 bg-amber-500 text-white'
               : 'border-amber-200 bg-white text-amber-700 hover:bg-amber-50'
@@ -54,7 +54,7 @@ export function FilterBar({
           <button
             key={btn.value}
             onClick={() => onButtonChange(activeButton === btn.value ? null : btn.value)}
-            className={`rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
+            className={`flex-shrink-0 rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
               activeButton === btn.value
                 ? 'border-amber-500 bg-amber-500 text-white'
                 : 'border-amber-200 bg-white text-amber-700 hover:bg-amber-50'
@@ -67,7 +67,7 @@ export function FilterBar({
           <button
             key={pill.label}
             onClick={pill.onToggle}
-            className={`rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
+            className={`flex-shrink-0 rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
               pill.active
                 ? 'border-green-500 bg-green-500 text-white'
                 : 'border-amber-200 bg-white text-amber-700 hover:bg-amber-50'

From 328c1d7077f2854cea1905679c57427ec3c966a9 Mon Sep 17 00:00:00 2001
From: Ian Chesal <ian.chesal@gmail.com>
Date: Sun, 19 Apr 2026 02:25:27 +0000
Subject: [PATCH 8/9] fix(mobile): wrap recommendations controls on narrow
 screens; disable rating form during submission

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/recommendations/page.tsx | 4 ++--
 src/components/rating-dialog.tsx | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/recommendations/page.tsx b/src/app/recommendations/page.tsx
index e635948..ae61dc6 100644
--- a/src/app/recommendations/page.tsx
+++ b/src/app/recommendations/page.tsx
@@ -87,7 +87,7 @@ export default function RecommendationsPage() {
       </div>
 
       {/* Controls */}
-      <div className="flex items-center gap-4 mb-6">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-3 mb-6">
         <label className="flex items-center gap-2 cursor-pointer select-none">
           <div
             onClick={() => setCriterionOnly(!criterionOnly)}
@@ -240,7 +240,7 @@ function RecommendationCard({
             ) : (
               <Button
                 size="sm"
-                className="h-6 text-xs bg-amber-600 hover:bg-amber-700 text-white"
+                className="text-xs bg-amber-600 hover:bg-amber-700 text-white"
                 onClick={handleAdd}
                 disabled={adding}
               >
diff --git a/src/components/rating-dialog.tsx b/src/components/rating-dialog.tsx
index 87e0506..a4369db 100644
--- a/src/components/rating-dialog.tsx
+++ b/src/components/rating-dialog.tsx
@@ -11,6 +11,7 @@ import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
 import { ThumbRating } from './thumb-rating'
 import { otherUser, USER_KEYS } from '@/lib/user-utils'
+import { cn } from '@/lib/utils'
 import type { Movie, User, Rating, RatingValue } from '@/types'
 
 type Step = 'who' | 'form' | 'waiting' | 'reveal'
@@ -98,7 +99,7 @@ export function RatingDialog({ movie, open, onClose, onComplete, userNames }: Ra
         )}
 
         {step === 'form' && currentUser && (
-          <div className="space-y-4 py-2">
+          <div className={cn('space-y-4 py-2', submitting && 'pointer-events-none opacity-50')}>
             <p className="text-sm text-stone-600">
               {userNames[currentUser]}&apos;s verdict on <em>{movie.title}</em>
             </p>

From 8389f22984fdd3c1272f149ca5db645d815ffd72 Mon Sep 17 00:00:00 2001
From: Ian Chesal <ian.chesal@gmail.com>
Date: Sun, 19 Apr 2026 02:30:47 +0000
Subject: [PATCH 9/9] fix(mobile): center watchlist and recommendations page
 containers; clarify dot indicator intent

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/recommendations/page.tsx     | 2 +-
 src/app/watchlist/page.tsx           | 2 +-
 src/components/mobile-bottom-nav.tsx | 2 ++
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/recommendations/page.tsx b/src/app/recommendations/page.tsx
index ae61dc6..f292e51 100644
--- a/src/app/recommendations/page.tsx
+++ b/src/app/recommendations/page.tsx
@@ -78,7 +78,7 @@ export default function RecommendationsPage() {
   }
 
   return (
-    <div className="p-6 max-w-2xl">
+    <div className="p-6 max-w-2xl mx-auto">
       <div className="mb-6">
         <h1 className="text-2xl font-bold text-amber-900 mb-1">Recommendations</h1>
         <p className="text-sm text-stone-500">
diff --git a/src/app/watchlist/page.tsx b/src/app/watchlist/page.tsx
index ac855ee..ae49a33 100644
--- a/src/app/watchlist/page.tsx
+++ b/src/app/watchlist/page.tsx
@@ -107,7 +107,7 @@ export default function WatchlistPage() {
   const readyCount = movies.filter((m) => m.seerrStatus === 'available').length
 
   return (
-    <div className="p-6 max-w-2xl">
+    <div className="p-6 max-w-2xl mx-auto">
       <div className="flex justify-between items-center mb-6">
         <h1 className="text-2xl font-bold text-amber-900">Up Next</h1>
         {!loading && (
diff --git a/src/components/mobile-bottom-nav.tsx b/src/components/mobile-bottom-nav.tsx
index ff51fcc..8d79fd4 100644
--- a/src/components/mobile-bottom-nav.tsx
+++ b/src/components/mobile-bottom-nav.tsx
@@ -40,6 +40,8 @@ export function MobileBottomNav() {
             {label}
           </span>
           <span
+            aria-hidden="true"
+            // invisible keeps the dot in layout flow; prevents tab labels from shifting when active tab changes
             className={cn(
               'h-1 w-5 rounded-full mt-0.5 transition-colors',
               pathname === href ? 'bg-amber-600' : 'invisible'