From 7c35d627bdada26f9631929043d606cb73f648b5 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Sun, 26 Nov 2023 15:58:50 +0300
Subject: [PATCH] Remove scroll snap and update last 2 scrolls

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 .../src/components/VMediaInfo/VByLine/VByLine.vue   | 13 +++++++++----
 .../VMediaInfo/VByLine/VSourceCreatorButton.vue     |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/VMediaInfo/VByLine/VByLine.vue b/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
index 8bd3b24e495..30de95ec581 100644
--- a/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
+++ b/frontend/src/components/VMediaInfo/VByLine/VByLine.vue
@@ -13,7 +13,7 @@
     >
       <div
         ref="buttonsRef"
-        class="buttons flex snap-x justify-start gap-x-3 overflow-x-scroll p-1.5px sm:gap-x-1"
+        class="buttons flex justify-start gap-x-3 overflow-x-scroll p-1.5px sm:gap-x-1"
         :class="{
           'ms-11': showScrollButton.start,
           'me-11': showScrollButton.end,
@@ -171,18 +171,23 @@ export default defineComponent({
 
     const scroll = (to: "start" | "end") => {
       if (!buttonsRef.value) return
-      showScrollButton[to === "start" ? "end" : "start"] = true
-
       const buttons = buttonsRef.value
 
-      let distToSide = getDistToSide(to, dir.value, buttons)
+      showScrollButton[to === "start" ? "end" : "start"] = true
 
+      let distToSide = getDistToSide(to, dir.value, buttons)
       let adjustedScrollStep = scrollStep
 
+      // If the scroll step is larger than the distance to the side, scroll
+      // to the side and hide the scroll button.
+      // If the distance to the side is less than twice the scroll step, scroll
+      // half the distance to the side to prevent a very small scroll at the end.
       const isLastScroll = distToSide - scrollMargin <= scrollStep
       if (isLastScroll) {
         hideScrollButton(to)
         adjustedScrollStep = to === "start" ? distToSide : buttons.scrollWidth
+      } else if (distToSide < scrollStep * 2) {
+        adjustedScrollStep = distToSide / 2
       }
       if (dir.value === "rtl") {
         adjustedScrollStep = -adjustedScrollStep
diff --git a/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue b/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
index 7536d2c2cff..723cde5f08f 100644
--- a/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
+++ b/frontend/src/components/VMediaInfo/VByLine/VSourceCreatorButton.vue
@@ -3,7 +3,7 @@
     as="VLink"
     size="small"
     has-icon-start
-    class="label-bold snap-start !bg-dark-charcoal-10 hover:!bg-dark-charcoal hover:text-white sm:!bg-tx"
+    class="label-bold !bg-dark-charcoal-10 hover:!bg-dark-charcoal hover:text-white sm:!bg-tx"
     variant="transparent-gray"
     :href="href"
   >