From 57db25aa94d1804b0492be193a0bf0fd3fbfe331 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Thu, 12 Feb 2026 13:12:22 +0000
Subject: [PATCH] Match My List layout to Films tab (horizontal slider, card
 sizing)

Replaced grid layout in My List sections with the same horizontal
scroll slider used by ContentRow: flex gap-8, fixed card widths
(200px/280px), matching padding and overflow behavior. Cards,
spacing, and scrolling now look identical across Films and My List.

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

diff --git a/src/views/Browse.vue b/src/views/Browse.vue
index 2a929d9..ce37d54 100644
--- a/src/views/Browse.vue
+++ b/src/views/Browse.vue
@@ -83,11 +83,11 @@
             <!-- 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-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 class="flex gap-8 overflow-x-auto overflow-y-visible scrollbar-hide scroll-smooth px-4 pt-6 pb-8">
                 <div
                   v-for="item in continueWatching"
                   :key="item.content.id"
-                  class="content-card group/card cursor-pointer"
+                  class="content-card flex-shrink-0 w-[200px] md:w-[280px] group/card cursor-pointer"
                   @click="handleContentClick(item.content)"
                 >
                   <div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative">
@@ -112,11 +112,11 @@
             <!-- 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-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 class="flex gap-8 overflow-x-auto overflow-y-visible scrollbar-hide scroll-smooth px-4 pt-6 pb-8">
                 <div
                   v-for="content in myListContent"
                   :key="content.id"
-                  class="content-card group/card cursor-pointer"
+                  class="content-card flex-shrink-0 w-[200px] md:w-[280px] group/card cursor-pointer"
                   @click="handleContentClick(content)"
                 >
                   <div class="glass-card rounded-lg p-1.5 transition-all duration-300">
@@ -138,11 +138,11 @@
             <!-- 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-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 class="flex gap-8 overflow-x-auto overflow-y-visible scrollbar-hide scroll-smooth px-4 pt-6 pb-8">
                 <div
                   v-for="content in rentedContent"
                   :key="content.id"
-                  class="content-card group/card cursor-pointer"
+                  class="content-card flex-shrink-0 w-[200px] md:w-[280px] group/card cursor-pointer"
                   @click="handleContentClick(content)"
                 >
                   <div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative">
@@ -423,6 +423,15 @@ onMounted(() => {
   overflow-x: hidden;
 }
 
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
 /* Hero Title Styles */
 .hero-title {
   background: linear-gradient(to right, #fafafa, #9ca3af);