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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user