From 169e03d72d7c43989019aeaf4efd7fffaff38575 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Fri, 13 Feb 2026 23:02:27 +0000
Subject: [PATCH] style: keep Films rows as horizontal scroll with responsive
 card sizes

Cards now scale to match the Algos grid proportions at each breakpoint
(1/3, 1/4, 1/5, 1/6 of viewport) while remaining in a horizontally
scrolling flex row with nav buttons on desktop.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docker-compose.yml            |  2 +-
 src/components/ContentRow.vue | 43 ++++++++++++++++++-----------------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 602dc1d..02f638c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -20,7 +20,7 @@ services:
       context: .
       dockerfile: Dockerfile
       args:
-        CACHEBUST: "29"
+        CACHEBUST: "30"
         VITE_USE_MOCK_DATA: "false"
         VITE_CONTENT_ORIGIN: ${FRONTEND_URL}
         VITE_INDEEHUB_API_URL: /api
diff --git a/src/components/ContentRow.vue b/src/components/ContentRow.vue
index 6d1631e..5fc2778 100644
--- a/src/components/ContentRow.vue
+++ b/src/components/ContentRow.vue
@@ -5,11 +5,11 @@
     </h2>
     
     <div class="relative group">
-      <!-- Scroll Left Button (mobile only — desktop uses grid) -->
+      <!-- Scroll Left Button -->
       <button 
         v-if="canScrollLeft"
         @click="scrollLeft"
-        class="scroll-nav-button md:hidden flex items-center justify-center absolute left-0 top-0 bottom-0 z-10 w-12 transition-all"
+        class="scroll-nav-button hidden md:flex items-center justify-center absolute left-0 top-0 bottom-0 z-10 w-12 transition-all"
       >
         <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
           <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
@@ -54,11 +54,11 @@
         </div>
       </div>
 
-      <!-- Scroll Right Button (mobile only — desktop uses grid) -->
+      <!-- Scroll Right Button -->
       <button 
         v-if="canScrollRight"
         @click="scrollRight"
-        class="scroll-nav-button md:hidden flex items-center justify-center absolute right-0 top-0 bottom-0 z-10 w-12 transition-all"
+        class="scroll-nav-button hidden md:flex items-center justify-center absolute right-0 top-0 bottom-0 z-10 w-12 transition-all"
       >
         <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
           <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
@@ -130,8 +130,8 @@ onUnmounted(() => {
 
 <style scoped>
 /* ── Content Slider ──
-   Mobile: horizontal scroll (flex row)
-   Desktop: responsive grid matching the Algos tab layout */
+   Horizontal scroll at all breakpoints.
+   Card widths scale responsively to match the Algos grid proportions. */
 .content-slider {
   display: flex;
   gap: 1rem;
@@ -146,42 +146,43 @@ onUnmounted(() => {
   display: none;
 }
 
-/* Mobile: fixed-width cards for horizontal scrolling */
+/* Mobile: compact cards */
 .content-slider > .content-card {
   flex-shrink: 0;
   width: 160px;
 }
 
-/* Desktop: switch to responsive grid */
+/* md: card width ≈ 1/3 of viewport (matches grid-cols-3) */
 @media (min-width: 768px) {
   .content-slider {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;
-    overflow: visible;
   }
-
   .content-slider > .content-card {
-    width: auto;
+    width: calc((100vw - 4rem - 3rem) / 3);
   }
 }
 
+/* lg: card width ≈ 1/4 of viewport (matches grid-cols-4) */
 @media (min-width: 1024px) {
   .content-slider {
-    grid-template-columns: repeat(4, 1fr);
     gap: 2rem;
   }
-}
-
-@media (min-width: 1280px) {
-  .content-slider {
-    grid-template-columns: repeat(5, 1fr);
+  .content-slider > .content-card {
+    width: calc((100vw - 4rem - 6rem) / 4);
   }
 }
 
+/* xl: card width ≈ 1/5 of viewport (matches grid-cols-5) */
+@media (min-width: 1280px) {
+  .content-slider > .content-card {
+    width: calc((100vw - 4rem - 8rem) / 5);
+  }
+}
+
+/* 2xl: card width ≈ 1/6 of viewport (matches grid-cols-6) */
 @media (min-width: 1536px) {
-  .content-slider {
-    grid-template-columns: repeat(6, 1fr);
+  .content-slider > .content-card {
+    width: calc((100vw - 4rem - 10rem) / 6);
   }
 }