From dc3c25138ce6e31bf15875eeebc4dc7884339b75 Mon Sep 17 00:00:00 2001
From: Dirk <dirkdevbusiness@gmail.com>
Date: Thu, 25 Jun 2026 12:58:59 +0200
Subject: [PATCH] ui: increase z-index and add hover transitions to horizontal
 scroll controls

---
 .../content/HorizontalContentTileCollection.vue        | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/src/components/content/HorizontalContentTileCollection.vue b/app/src/components/content/HorizontalContentTileCollection.vue
index 83b91d3380..5edbef917c 100644
--- a/app/src/components/content/HorizontalContentTileCollection.vue
+++ b/app/src/components/content/HorizontalContentTileCollection.vue
@@ -113,29 +113,27 @@ useInfiniteScroll(
 
         <div class="relative">
             <div
-                class="group absolute left-0 top-0 z-10 h-full cursor-pointer px-6"
+                class="group absolute left-0 top-0 z-30 h-full cursor-pointer px-6"
                 @click="spinLeft()"
             >
                 <ArrowLeftCircleIcon
                     v-if="showLeftSpin"
                     :class="[
-                        'mt-7 h-10 w-10 text-zinc-100 opacity-80 group-hover:opacity-90 md:h-14 md:w-14',
+                        'mt-7 h-10 w-10 text-zinc-100 opacity-80 transition-opacity duration-200 group-hover:opacity-100 md:h-14 md:w-14',
                         computedTitlePosition === 'overlay' ? 'md:mt-20' : 'md:mt-10',
                     ]"
-                    @click="spinLeft()"
                 />
             </div>
             <div
-                class="group absolute right-0 top-0 z-10 h-full cursor-pointer px-6"
+                class="group absolute right-0 top-0 z-30 h-full cursor-pointer px-6"
                 @click="spinRight()"
             >
                 <ArrowRightCircleIcon
                     v-if="showRightSpin"
                     :class="[
-                        'h-10 w-10 text-zinc-100 opacity-80 group-hover:opacity-90 md:mt-10 md:h-14 md:w-14',
+                        'mt-7 h-10 w-10 text-zinc-100 opacity-80 transition-opacity duration-200 group-hover:opacity-100 md:h-14 md:w-14',
                         computedTitlePosition === 'overlay' ? 'md:mt-20' : 'md:mt-10',
                     ]"
-                    @click="spinRight()"
                 />
             </div>