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

fix: show exactly 5 content cards per row on desktop across all tabs

Browse Source 
Cards used a fixed 280px width which showed ~6 on most desktops.
Algorithm filter tabs used a 5-column grid. This mismatch caused
layout jumping when switching tabs.

Now uses calc((100vw - 12rem) / 5) so exactly 5 cards are visible
on desktop for all scroll rows (Films, My List, Rentals, etc.),
matching the 5-column grid in filter views. Mobile stays at 200px.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-13 22:26:40 +00:00
parent 6bb95fd004
commit f715534c06
3 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/Browse.vue
View File

@@ -87,7 +87,7 @@
<div
v-for="item in continueWatching"
:key="item.content.id"
class="content-card flex-shrink-0 w-[200px] md:w-[280px] group/card cursor-pointer"
class="content-card flex-shrink-0 w-[200px] card-desktop-5 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] md:w-[280px] group/card cursor-pointer"
class="content-card flex-shrink-0 w-[200px] card-desktop-5 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] md:w-[280px] group/card cursor-pointer"
class="content-card flex-shrink-0 w-[200px] card-desktop-5 group/card cursor-pointer"
@click="handleContentClick(content)"
>
<div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative">
@@ -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;
}
}
</style>