From 4558415d80f62ff6a3f7c298a83b364e23959305 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Tue, 3 Feb 2026 00:45:05 +0000
Subject: [PATCH] Create compact glass containers for arrow icons

Restructured scroll navigation:
- Arrow icons now in their own glass containers
- Minimal padding: 8px around icons
- 12px border-radius for rounded corners
- Positioned with left-2/right-2 and centered vertically
- Smaller, more elegant design
- Scale(1.05) on hover for subtle feedback

Icons are now compact glass pills instead of full-height bars.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/ContentRow.vue | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/ContentRow.vue b/src/components/ContentRow.vue
index 9d10df8..9206b4c 100644
--- a/src/components/ContentRow.vue
+++ b/src/components/ContentRow.vue
@@ -9,11 +9,13 @@
       <button 
         v-if="canScrollLeft"
         @click="scrollLeft"
-        class="scroll-nav-button hidden md:flex items-center justify-center absolute left-0 top-0 bottom-0 z-10 w-12 transition-all"
+        class="hidden md:flex items-center justify-center absolute left-2 top-1/2 -translate-y-1/2 z-10 transition-all"
       >
-        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
-        </svg>
+        <div class="scroll-nav-icon">
+          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+          </svg>
+        </div>
       </button>
 
       <!-- Content Slider -->
@@ -47,11 +49,13 @@
       <button 
         v-if="canScrollRight"
         @click="scrollRight"
-        class="scroll-nav-button hidden md:flex items-center justify-center absolute right-0 top-0 bottom-0 z-10 w-12 transition-all"
+        class="hidden md:flex items-center justify-center absolute right-2 top-1/2 -translate-y-1/2 z-10 transition-all"
       >
-        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
-        </svg>
+        <div class="scroll-nav-icon">
+          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+          </svg>
+        </div>
       </button>
     </div>
   </div>
@@ -125,7 +129,9 @@ onUnmounted(() => {
   letter-spacing: 0.05em; /* 5% character spacing */
 }
 
-.scroll-nav-button {
+.scroll-nav-icon {
+  padding: 8px;
+  border-radius: 12px;
   background: rgba(0, 0, 0, 0.35);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
@@ -135,10 +141,14 @@ onUnmounted(() => {
     inset 0 1px 0 rgba(255, 255, 255, 0.15);
   color: rgba(255, 255, 255, 0.8);
   opacity: 0.7;
+  transition: all 0.3s ease;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.scroll-nav-button:hover {
+button:hover .scroll-nav-icon {
   background: rgba(0, 0, 0, 0.45);
   border-color: rgba(255, 255, 255, 0.15);
   opacity: 1;
@@ -146,6 +156,7 @@ onUnmounted(() => {
   box-shadow:
     0 12px 32px rgba(0, 0, 0, 0.6),
     inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  transform: scale(1.05);
 }
 
 .glass-card {