From 989dd75a8460a95586580fd35e72cd1d2d7d3547 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Fri, 13 Feb 2026 22:56:35 +0000
Subject: [PATCH] style: change content grid from 5 to 6 cards per row on
 desktop

Cards were feeling too large at 5 per row. Updated calc to fit 6
cards uniformly across ContentRow and Browse (My List sections).

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docker-compose.yml            |  2 +-
 src/components/ContentRow.vue | 14 +++++++-------
 src/views/Browse.vue          | 14 +++++++-------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 2fce963..8674e5c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -20,7 +20,7 @@ services:
       context: .
       dockerfile: Dockerfile
       args:
-        CACHEBUST: "27"
+        CACHEBUST: "28"
         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 4f69e1c..4014ca0 100644
--- a/src/components/ContentRow.vue
+++ b/src/components/ContentRow.vue
@@ -25,7 +25,7 @@
         <div
           v-for="content in contents"
           :key="content.id"
-          class="content-card flex-shrink-0 w-[200px] card-desktop-5 group/card cursor-pointer"
+          class="content-card flex-shrink-0 w-[200px] card-desktop-6 group/card cursor-pointer"
           @click="$emit('content-click', content)"
         >
           <div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative">
@@ -184,14 +184,14 @@ onUnmounted(() => {
   transform: translateY(-4px);
 }
 
-/* Show exactly 5 cards on desktop.
+/* Show exactly 6 cards on desktop.
    Total horizontal padding: section px-4 (32px) + slider px-4 (32px) = 64px.
-   Gaps between 5 cards: 4 × 2rem (gap-8) = 128px.
-   Card width = (viewport - 64px padding - 128px gaps) / 5 */
+   Gaps between 6 cards: 5 × 2rem (gap-8) = 160px.
+   Card width = (viewport - 64px padding - 160px gaps) / 6 */
 @media (min-width: 768px) {
-  .card-desktop-5 {
-    width: calc((100vw - 12rem) / 5);
-    max-width: 360px;
+  .card-desktop-6 {
+    width: calc((100vw - 14rem) / 6);
+    max-width: 300px;
   }
 }
 
diff --git a/src/views/Browse.vue b/src/views/Browse.vue
index 12cad29..518e42c 100644
--- a/src/views/Browse.vue
+++ b/src/views/Browse.vue
@@ -87,7 +87,7 @@
                 <div
                   v-for="item in continueWatching"
                   :key="item.content.id"
-                  class="content-card flex-shrink-0 w-[200px] card-desktop-5 group/card cursor-pointer"
+                  class="content-card flex-shrink-0 w-[200px] card-desktop-6 group/card cursor-pointer"
                   @click="handleContentClick(item.content)"
                 >
                   <div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative">
@@ -116,7 +116,7 @@
                 <div
                   v-for="content in myListContent"
                   :key="content.id"
-                  class="content-card flex-shrink-0 w-[200px] card-desktop-5 group/card cursor-pointer"
+                  class="content-card flex-shrink-0 w-[200px] card-desktop-6 group/card cursor-pointer"
                   @click="handleContentClick(content)"
                 >
                   <div class="glass-card rounded-lg p-1.5 transition-all duration-300">
@@ -142,7 +142,7 @@
                 <div
                   v-for="content in rentedContent"
                   :key="content.id"
-                  class="content-card flex-shrink-0 w-[200px] card-desktop-5 group/card cursor-pointer"
+                  class="content-card flex-shrink-0 w-[200px] card-desktop-6 group/card cursor-pointer"
                   @click="handleContentClick(content)"
                 >
                   <div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative">
@@ -585,11 +585,11 @@ watch(() => searchSelection.pendingContent, (content) => {
   transform: translateY(-4px);
 }
 
-/* Show exactly 5 cards on desktop (matches ContentRow) */
+/* Show exactly 6 cards on desktop (matches ContentRow) */
 @media (min-width: 768px) {
-  .card-desktop-5 {
-    width: calc((100vw - 12rem) / 5);
-    max-width: 360px;
+  .card-desktop-6 {
+    width: calc((100vw - 14rem) / 6);
+    max-width: 300px;
   }
 }
 </style>