From 5e6c1e009a8a8d3cdc1b3e3cdd94c0c82632f0f5 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Thu, 12 Feb 2026 13:06:23 +0000
Subject: [PATCH] Match My List and filter grid text styling to ContentRow

Title and description text sizes in the My List (Continue Watching,
Saved Films, Rentals) and filtered grid views were smaller than
the Films tab ContentRow cards. Aligned all to use the same
text-base/md:text-xl title and text-base description sizing.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/views/Browse.vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/views/Browse.vue b/src/views/Browse.vue
index b78f881..2a929d9 100644
--- a/src/views/Browse.vue
+++ b/src/views/Browse.vue
@@ -82,7 +82,7 @@
         <template v-if="isMyListTab && isLoggedInAnywhere">
             <!-- Continue Watching -->
             <div v-if="continueWatching.length > 0" class="content-row">
-              <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-6 px-4 uppercase">Continue Watching</h2>
+              <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">Continue Watching</h2>
               <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4">
                 <div
                   v-for="item in continueWatching"
@@ -102,8 +102,8 @@
                     </div>
                   </div>
                   <div class="mt-2">
-                    <h3 class="text-sm md:text-base font-semibold text-white truncate">{{ item.content.title }}</h3>
-                    <p class="text-xs text-white/60 truncate hidden md:block">{{ item.content.description }}</p>
+                    <h3 class="text-base md:text-xl font-semibold md:font-bold text-white truncate">{{ item.content.title }}</h3>
+                    <p class="text-base text-white/60 truncate hidden md:block">{{ item.content.description }}</p>
                   </div>
                 </div>
               </div>
@@ -111,7 +111,7 @@
 
             <!-- Saved Films -->
             <div v-if="myListContent.length > 0" class="content-row">
-              <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-6 px-4 uppercase">Saved Films</h2>
+              <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">Saved Films</h2>
               <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4">
                 <div
                   v-for="content in myListContent"
@@ -128,8 +128,8 @@
                     />
                   </div>
                   <div class="mt-2">
-                    <h3 class="text-sm md:text-base font-semibold text-white truncate">{{ content.title }}</h3>
-                    <p class="text-xs text-white/60 truncate hidden md:block">{{ content.description }}</p>
+                    <h3 class="text-base md:text-xl font-semibold md:font-bold text-white truncate">{{ content.title }}</h3>
+                    <p class="text-base text-white/60 truncate hidden md:block">{{ content.description }}</p>
                   </div>
                 </div>
               </div>
@@ -137,7 +137,7 @@
 
             <!-- Rentals -->
             <div v-if="rentedContent.length > 0" class="content-row">
-              <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-6 px-4 uppercase">My Rentals</h2>
+              <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">My Rentals</h2>
               <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4">
                 <div
                   v-for="content in rentedContent"
@@ -157,8 +157,8 @@
                     </div>
                   </div>
                   <div class="mt-2">
-                    <h3 class="text-sm md:text-base font-semibold text-white truncate">{{ content.title }}</h3>
-                    <p class="text-xs text-white/60 truncate hidden md:block">{{ content.description }}</p>
+                    <h3 class="text-base md:text-xl font-semibold md:font-bold text-white truncate">{{ content.title }}</h3>
+                    <p class="text-base text-white/60 truncate hidden md:block">{{ content.description }}</p>
                   </div>
                 </div>
               </div>
@@ -174,7 +174,7 @@
         <!-- ===== FILMS TAB: Filtered Grid ===== -->
         <template v-else-if="isFilterActive">
           <div class="content-row">
-            <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-6 px-4 uppercase">
+            <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">
               {{ activeAlgorithmLabel }}
             </h2>
             <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4">
@@ -193,8 +193,8 @@
                   />
                 </div>
                 <div class="mt-2">
-                  <h3 class="text-sm md:text-base font-semibold text-white truncate">{{ content.title }}</h3>
-                  <p class="text-xs text-white/60 truncate hidden md:block">{{ content.description }}</p>
+                  <h3 class="text-base md:text-xl font-semibold md:font-bold text-white truncate">{{ content.title }}</h3>
+                  <p class="text-base text-white/60 truncate hidden md:block">{{ content.description }}</p>
                 </div>
               </div>
             </div>