fix(mobile): address all 13 mobile UI/UX review issues

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

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;
+}

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">
@@ -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}
               >

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 && (
@@ -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>
           )}

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'

src/components/mobile-bottom-nav.tsx

@@ -24,21 +24,29 @@ 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}
           </span>
           <span className={cn(pathname === href ? 'font-bold' : 'font-medium')}>
             {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'
+            )}
+          />
         </Link>
       ))}
     </nav>

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"

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>