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 @@ >
{ 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" >