From ea03167da8006141307fe791ef6a9c5e88d36b81 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Mon, 2 Feb 2026 22:46:45 +0000
Subject: [PATCH] feat: enhance layout and styling of content rows and header

- Updated content card width from 140/180px to 200/280px for improved visibility
- Changed image class to use 'object-contain' and added background color for better aesthetics
- Introduced a gradient background for the header with dynamic styles based on scroll position
- Added new CSS classes for header gradient effects and improved backdrop filter for a modern look

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/ContentRow.vue |  4 ++--
 src/views/Browse.vue          | 40 ++++++++++++++++++++++++++++++-----
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/components/ContentRow.vue b/src/components/ContentRow.vue
index 0a22c39..f5a8812 100644
--- a/src/components/ContentRow.vue
+++ b/src/components/ContentRow.vue
@@ -25,13 +25,13 @@
         <div
           v-for="content in contents"
           :key="content.id"
-          class="content-card flex-shrink-0 w-[140px] md:w-[180px]"
+          class="content-card flex-shrink-0 w-[200px] md:w-[280px]"
           @click="$emit('content-click', content)"
         >
           <img 
             :src="content.thumbnail" 
             :alt="content.title"
-            class="w-full aspect-[2/3] object-cover rounded-lg"
+            class="w-full aspect-[2/3] object-contain rounded-lg bg-neutral-900"
             loading="lazy"
           />
           <div class="mt-2">
diff --git a/src/views/Browse.vue b/src/views/Browse.vue
index 0e929c0..aa1d599 100644
--- a/src/views/Browse.vue
+++ b/src/views/Browse.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="browse-view">
     <!-- Header / Navigation -->
-    <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
+    <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 header-gradient"
             :class="{ 
-              'bg-white/10 dark:bg-black/20 backdrop-blur-xl shadow-2xl border-b border-white/10': scrolled, 
-              'bg-transparent': !scrolled 
+              'header-scrolled': scrolled, 
+              'header-top': !scrolled 
             }">
-      <div class="container mx-auto px-8 py-4">
+      <div class="mx-auto px-8 py-4" style="max-width: 75%;">
         <div class="flex items-center justify-between">
           <!-- Logo -->
           <div class="flex items-center gap-8">
@@ -45,7 +45,7 @@
         <img 
           :src="featuredContent?.backdrop || 'https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=1920'"
           alt="Featured content"
-          class="w-full h-full object-cover"
+          class="w-full h-full object-cover object-center"
         />
         <div class="absolute inset-0 hero-gradient"></div>
       </div>
@@ -187,4 +187,34 @@ onUnmounted(() => {
 .browse-view {
   min-height: 100vh;
 }
+
+.header-gradient {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0,0,0,0.5) 75%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0,0,0,0.5) 75%, transparent 100%);
+}
+
+.header-top {
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.7) 0%,
+    rgba(0, 0, 0, 0.7) 50%,
+    rgba(0, 0, 0, 0.4) 75%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+
+.header-scrolled {
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.8) 0%,
+    rgba(0, 0, 0, 0.8) 50%,
+    rgba(0, 0, 0, 0.5) 75%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+}
 </style>