From c4df96bd729c4e0615ed8fec5fd3b017a1a666ab Mon Sep 17 00:00:00 2001
From: Lukas <lukas@slucky.de>
Date: Sun, 25 May 2025 21:33:25 +0200
Subject: [PATCH] fix(web): center memory lane buttons (#18613)

* fix(web): center memory lane buttons

* format
---
 .../lib/components/photos-page/memory-lane.svelte    | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/photos-page/memory-lane.svelte b/web/src/lib/components/photos-page/memory-lane.svelte
index bb1e29e4a05..a33fa7c1bc9 100644
--- a/web/src/lib/components/photos-page/memory-lane.svelte
+++ b/web/src/lib/components/photos-page/memory-lane.svelte
@@ -47,7 +47,10 @@
     {#if canScrollLeft || canScrollRight}
       <div class="sticky start-0 z-1">
         {#if canScrollLeft}
-          <div class="absolute start-4 top-24" transition:fade={{ duration: 200 }}>
+          <div
+            class="absolute start-4 max-md:top-[75px] top-[108px] -translate-y-1/2"
+            transition:fade={{ duration: 200 }}
+          >
             <button
               type="button"
               class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
@@ -60,7 +63,10 @@
           </div>
         {/if}
         {#if canScrollRight}
-          <div class="absolute end-4 top-24 z-1" transition:fade={{ duration: 200 }}>
+          <div
+            class="absolute end-4 max-md:top-[75px] top-[108px] -translate-y-1/2 z-1"
+            transition:fade={{ duration: 200 }}
+          >
             <button
               type="button"
               class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
@@ -77,7 +83,7 @@
     <div class="inline-block" use:resizeObserver={({ width }) => (innerWidth = width)}>
       {#each memoryStore.memories as memory (memory.id)}
         <a
-          class="memory-card relative me-2 md:me-4 last:me-0 inline-block aspect-3/4 md:aspect-4/3 max-md:h-[150px] xl:aspect-video h-[215px] rounded-xl"
+          class="memory-card relative me-2 md:me-4 last:me-0 inline-block aspect-3/4 md:aspect-4/3 max-md:h-[150px] xl:aspect-video h-[216px] rounded-xl"
           href="{AppRoute.MEMORY}?{QueryParameter.ID}={memory.assets[0].id}"
         >
           <img