Add tight glass container around scroll nav buttons

Wrapped scroll buttons in contained glass containers:
- Tight 10x10 button inside glass container
- Positioned vertically centered with offset from edges
- Container has full glassmorphic treatment
- 12px border radius for rounded corners
- 2px padding creates tight fit around button
- Hover effects on container instead of button
- Button is transparent, inherits container styling

Creates a more defined, pill-shaped button appearance.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/ContentRow.vue

@@ -6,17 +6,19 @@
     
     <div class="relative group">
       <!-- Scroll Left Button -->
-      <button 
+      <div 
         v-if="canScrollLeft"
-        @click="scrollLeft"
+        class="scroll-nav-container hidden md:flex absolute left-4 top-1/2 -translate-y-1/2 z-10"
-        class="hidden md:flex items-center justify-center absolute left-2 top-1/2 -translate-y-1/2 z-10 transition-all"
       >
-        <div class="scroll-nav-icon">
+        <button 
+          @click="scrollLeft"
+          class="scroll-nav-button flex items-center justify-center w-10 h-10 transition-all"
+        >
           <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>
-      </button>
+      </div>
 
       <!-- Content Slider -->
       <div 
@@ -46,17 +48,19 @@
       </div>
 
       <!-- Scroll Right Button -->
-      <button 
+      <div 
         v-if="canScrollRight"
-        @click="scrollRight"
+        class="scroll-nav-container hidden md:flex absolute right-4 top-1/2 -translate-y-1/2 z-10"
-        class="hidden md:flex items-center justify-center absolute right-2 top-1/2 -translate-y-1/2 z-10 transition-all"
       >
-        <div class="scroll-nav-icon">
+        <button 
+          @click="scrollRight"
+          class="scroll-nav-button flex items-center justify-center w-10 h-10 transition-all"
+        >
           <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>
-      </button>
+      </div>
     </div>
   </div>
 </template>
@@ -129,9 +133,7 @@ onUnmounted(() => {
   letter-spacing: 0.05em; /* 5% character spacing */
 }
 
-.scroll-nav-icon {
+.scroll-nav-container {
-  padding: 8px;
-  border-radius: 12px;
   background: rgba(0, 0, 0, 0.35);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
@@ -139,24 +141,31 @@ onUnmounted(() => {
   box-shadow:
     0 8px 24px rgba(0, 0, 0, 0.45),
     inset 0 1px 0 rgba(255, 255, 255, 0.15);
-  color: rgba(255, 255, 255, 0.8);
+  border-radius: 12px;
+  padding: 2px;
   opacity: 0.7;
   transition: all 0.3s ease;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
-button:hover .scroll-nav-icon {
+.scroll-nav-container:hover {
   background: rgba(0, 0, 0, 0.45);
   border-color: rgba(255, 255, 255, 0.15);
   opacity: 1;
-  color: rgba(255, 255, 255, 1);
   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);
+}
+
+.scroll-nav-button {
+  background: transparent;
+  border: none;
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  border-radius: 10px;
+}
+
+.scroll-nav-container:hover .scroll-nav-button {
+  color: rgba(255, 255, 255, 1);
 }
 
 .glass-card {