From 76b477f664697e58adb3a2afab59362e23fdb376 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren?= <hello@soerenschwert.de>
Date: Thu, 7 Sep 2023 13:14:28 +0200
Subject: [PATCH] Use a different technique to scroll mobile list to selected
 location when hidden

Using `scrollIntoView` scrolls the item into view not just horizontally in the MobileList, but also vertically in the whole viewport, causing the viewport to jumpt down and then transition up with the list (looking janky).
---
 src/components/elements/MobileList.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/elements/MobileList.vue b/src/components/elements/MobileList.vue
index 01f7e310..5ee4fe54 100644
--- a/src/components/elements/MobileList.vue
+++ b/src/components/elements/MobileList.vue
@@ -38,8 +38,21 @@ function handleSelectedUuidUpdate(uuid: string | undefined, smooth = true) {
   if (scrollingList)
     return
 
+  const card = document.querySelector(`[data-card-uuid="${uuid}"]`)
+  if (!card)
+    return
+
   scrollingIntoView = true
-  document.querySelector(`[data-card-uuid="${uuid}"]`)?.scrollIntoView({ behavior: smooth ? 'smooth' : 'instant' })
+
+  if (smooth) {
+    card.scrollIntoView({ behavior: 'smooth' })
+  }
+  else {
+    scrollRoot.value!.scrollTo({
+      left: card.getBoundingClientRect().left,
+      behavior: 'instant',
+    })
+  }
 
   if (smooth) {
     if ('onscrollend' in window) {