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

Match My List and filter grid text styling to ContentRow

Browse Source 
Title and description text sizes in the My List (Continue Watching,
Saved Films, Rentals) and filtered grid views were smaller than
the Films tab ContentRow cards. Aligned all to use the same
text-base/md:text-xl title and text-base description sizing.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-12 13:06:23 +00:00
parent 4fb16e079e
commit 5e6c1e009a
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/Browse.vue
View File

@@ -82,7 +82,7 @@
<template v-if="isMyListTab && isLoggedInAnywhere"> <template v-if="isMyListTab && isLoggedInAnywhere">
<!-- Continue Watching --> <!-- Continue Watching -->
<div v-if="continueWatching.length > 0" class="content-row"> <div v-if="continueWatching.length > 0" class="content-row">
<h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-6 px-4 uppercase">Continue Watching</h2> <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">Continue Watching</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4"> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4">
<div <div
v-for="item in continueWatching" v-for="item in continueWatching"
@@ -102,8 +102,8 @@
</div> </div>
</div> </div>
<div class="mt-2"> <div class="mt-2">
<h3 class="text-sm md:text-base font-semibold text-white truncate">{{ item.content.title }}</h3> <h3 class="text-base md:text-xl font-semibold md:font-bold text-white truncate">{{ item.content.title }}</h3>
<p class="text-xs text-white/60 truncate hidden md:block">{{ item.content.description }}</p> <p class="text-base text-white/60 truncate hidden md:block">{{ item.content.description }}</p>
</div> </div>
</div> </div>
</div> </div>
@@ -111,7 +111,7 @@
<!-- Saved Films --> <!-- Saved Films -->
<div v-if="myListContent.length > 0" class="content-row"> <div v-if="myListContent.length > 0" class="content-row">
<h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-6 px-4 uppercase">Saved Films</h2> <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">Saved Films</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4"> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4">
<div <div
v-for="content in myListContent" v-for="content in myListContent"
@@ -128,8 +128,8 @@
/> />
</div> </div>
<div class="mt-2"> <div class="mt-2">
<h3 class="text-sm md:text-base font-semibold text-white truncate">{{ content.title }}</h3> <h3 class="text-base md:text-xl font-semibold md:font-bold text-white truncate">{{ content.title }}</h3>
<p class="text-xs text-white/60 truncate hidden md:block">{{ content.description }}</p> <p class="text-base text-white/60 truncate hidden md:block">{{ content.description }}</p>
</div> </div>
</div> </div>
</div> </div>
@@ -137,7 +137,7 @@
<!-- Rentals --> <!-- Rentals -->
<div v-if="rentedContent.length > 0" class="content-row"> <div v-if="rentedContent.length > 0" class="content-row">
<h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-6 px-4 uppercase">My Rentals</h2> <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">My Rentals</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4"> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4">
<div <div
v-for="content in rentedContent" v-for="content in rentedContent"
@@ -157,8 +157,8 @@
</div> </div>
</div> </div>
<div class="mt-2"> <div class="mt-2">
<h3 class="text-sm md:text-base font-semibold text-white truncate">{{ content.title }}</h3> <h3 class="text-base md:text-xl font-semibold md:font-bold text-white truncate">{{ content.title }}</h3>
<p class="text-xs text-white/60 truncate hidden md:block">{{ content.description }}</p> <p class="text-base text-white/60 truncate hidden md:block">{{ content.description }}</p>
</div> </div>
</div> </div>
</div> </div>
@@ -174,7 +174,7 @@
<!-- ===== FILMS TAB: Filtered Grid ===== --> <!-- ===== FILMS TAB: Filtered Grid ===== -->
<template v-else-if="isFilterActive"> <template v-else-if="isFilterActive">
<div class="content-row"> <div class="content-row">
<h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-6 px-4 uppercase"> <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">
{{ activeAlgorithmLabel }} {{ activeAlgorithmLabel }}
</h2> </h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4"> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4">
@@ -193,8 +193,8 @@
/> />
</div> </div>
<div class="mt-2"> <div class="mt-2">
<h3 class="text-sm md:text-base font-semibold text-white truncate">{{ content.title }}</h3> <h3 class="text-base md:text-xl font-semibold md:font-bold text-white truncate">{{ content.title }}</h3>
<p class="text-xs text-white/60 truncate hidden md:block">{{ content.description }}</p> <p class="text-base text-white/60 truncate hidden md:block">{{ content.description }}</p>
</div> </div>
</div> </div>
</div> </div>