diff --git a/docker-compose.yml b/docker-compose.yml index c994d6b..3cdc6d0 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -20,7 +20,7 @@ services: context: . dockerfile: Dockerfile args: - CACHEBUST: "17" + CACHEBUST: "18" 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 e107e40..4f69e1c 100644 --- a/src/components/ContentRow.vue +++ b/src/components/ContentRow.vue @@ -25,7 +25,7 @@
@@ -184,6 +184,17 @@ onUnmounted(() => { transform: translateY(-4px); } +/* Show exactly 5 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 */ +@media (min-width: 768px) { + .card-desktop-5 { + width: calc((100vw - 12rem) / 5); + max-width: 360px; + } +} + .social-badge { display: flex; align-items: center; diff --git a/src/views/Browse.vue b/src/views/Browse.vue index e08c17b..12cad29 100644 --- a/src/views/Browse.vue +++ b/src/views/Browse.vue @@ -87,7 +87,7 @@
@@ -116,7 +116,7 @@
@@ -142,7 +142,7 @@
@@ -584,4 +584,12 @@ watch(() => searchSelection.pendingContent, (content) => { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.05); transform: translateY(-4px); } + +/* Show exactly 5 cards on desktop (matches ContentRow) */ +@media (min-width: 768px) { + .card-desktop-5 { + width: calc((100vw - 12rem) / 5); + max-width: 360px; + } +}