lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: change content grid from 5 to 6 cards per row on desktop

Browse Source 
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>
This commit is contained in:
Dorian
2026-02-13 22:56:35 +00:00
parent ae97cbe67b
commit 989dd75a84
3 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docker-compose.yml
View File

@@ -20,7 +20,7 @@ services:
context: . context: .
dockerfile: Dockerfile dockerfile: Dockerfile
args: args:
CACHEBUST: "27" CACHEBUST: "28"
VITE_USE_MOCK_DATA: "false" VITE_USE_MOCK_DATA: "false"
VITE_CONTENT_ORIGIN: ${FRONTEND_URL} VITE_CONTENT_ORIGIN: ${FRONTEND_URL}
VITE_INDEEHUB_API_URL: /api VITE_INDEEHUB_API_URL: /api

14
src/components/ContentRow.vue
View File

@@ -25,7 +25,7 @@
<div <div
v-for="content in contents" v-for="content in contents"
:key="content.id" :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)" @click="$emit('content-click', content)"
> >
<div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative"> <div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative">
@@ -184,14 +184,14 @@ onUnmounted(() => {
transform: translateY(-4px); 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. Total horizontal padding: section px-4 (32px) + slider px-4 (32px) = 64px.
Gaps between 5 cards: 4 × 2rem (gap-8) = 128px. Gaps between 6 cards: 5 × 2rem (gap-8) = 160px.
Card width = (viewport - 64px padding - 128px gaps) / 5 */ Card width = (viewport - 64px padding - 160px gaps) / 6 */
@media (min-width: 768px) { @media (min-width: 768px) {
.card-desktop-5 { .card-desktop-6 {
width: calc((100vw - 12rem) / 5); width: calc((100vw - 14rem) / 6);
max-width: 360px; max-width: 300px;
} }
} }

14
src/views/Browse.vue
View File

@@ -87,7 +87,7 @@
<div <div
v-for="item in continueWatching" v-for="item in continueWatching"
:key="item.content.id" :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)" @click="handleContentClick(item.content)"
> >
<div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative"> <div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative">
@@ -116,7 +116,7 @@
<div <div
v-for="content in myListContent" v-for="content in myListContent"
:key="content.id" :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)" @click="handleContentClick(content)"
> >
<div class="glass-card rounded-lg p-1.5 transition-all duration-300"> <div class="glass-card rounded-lg p-1.5 transition-all duration-300">
@@ -142,7 +142,7 @@
<div <div
v-for="content in rentedContent" v-for="content in rentedContent"
:key="content.id" :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)" @click="handleContentClick(content)"
> >
<div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative"> <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); transform: translateY(-4px);
} }
/* Show exactly 5 cards on desktop (matches ContentRow) */ /* Show exactly 6 cards on desktop (matches ContentRow) */
@media (min-width: 768px) { @media (min-width: 768px) {
.card-desktop-5 { .card-desktop-6 {
width: calc((100vw - 12rem) / 5); width: calc((100vw - 14rem) / 6);
max-width: 360px; max-width: 300px;
} }
} }
</style> </style>