feat: improve content card sizing and spacing

- Reduced card width from 200/280px to 140/180px
- Increased gap between cards from 8px to 32px (gap-8)
- Added vertical padding (py-4) to content rows
- Made title text smaller and responsive
- Hide description on mobile for cleaner look

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-02 22:35:17 +00:00
parent 2269100dfb
commit b5c6901372
11 changed files with 5 additions and 5 deletions

View File

@@ -19,13 +19,13 @@
<!-- Content Slider -->
<div
ref="sliderRef"
class="flex gap-2 overflow-x-auto scrollbar-hide scroll-smooth px-6"
class="flex gap-8 overflow-x-auto scrollbar-hide scroll-smooth px-6 py-4"
@scroll="handleScroll"
>
<div
v-for="content in contents"
:key="content.id"
class="content-card flex-shrink-0 w-[200px] md:w-[280px]"
class="content-card flex-shrink-0 w-[140px] md:w-[180px]"
@click="$emit('content-click', content)"
>
<img
@@ -35,8 +35,8 @@
loading="lazy"
/>
<div class="mt-2">
<h3 class="text-sm font-medium text-white truncate">{{ content.title }}</h3>
<p class="text-xs text-white/60 truncate">{{ content.description }}</p>
<h3 class="text-xs md:text-sm font-medium text-white truncate">{{ content.title }}</h3>
<p class="text-xs text-white/60 truncate hidden md:block">{{ content.description }}</p>
</div>
</div>
</div>