fix: videos and video buttons

src/config/styling/marquee.ts

@@ -66,6 +66,8 @@ document.addEventListener("DOMContentLoaded", () => {
   };
 
   const updateDimensions = () => {
+    // capture item width
+    const oldItemWidth = itemWidth;
     itemWidth = container.clientWidth;
     if (itemWidth === 0) return;
 
@@ -79,9 +81,15 @@ document.addEventListener("DOMContentLoaded", () => {
       item.style.maxWidth = `${itemWidth}px`;
     });
 
+    if (oldItemWidth > 0) {
+      const scrollRatio = targetScrollX / oldItemWidth;
+      const relativeScroll = scrollRatio % originalCount;
       targetScrollX =
-      bufferSize * sequenceWidth +
-      (targetScrollX % sequenceWidth);
+        (bufferSize * originalCount + relativeScroll) * itemWidth;
+    } else {
+      targetScrollX = bufferSize * sequenceWidth;
+    }
+
     currentScrollX = targetScrollX;
     scroller.style.transform = `translateX(-${currentScrollX}px)`;
   };

src/styles/components/marquee.css

@@ -95,7 +95,7 @@
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
-  max-width: 85rem;
+  max-width: 80rem;
   height: 100%;
   display: flex;
   justify-content: space-between;
@@ -127,6 +127,8 @@
     opacity: 0.5;
     transition: opacity 0.3s ease;
     backdrop-filter: blur(var(--2xs));
+    border-radius: var(--radius-xs);
+    background-color: #55555580;
   }
 
   &:hover {
@@ -162,13 +164,18 @@
   }
 }
 
+@media (min-width: 83rem) {
+  .marquee-scroll {
+    min-width: 88rem;
+    max-width: 90rem;
+  }
+}
 @media not (min-width: 83rem) {
   .marquee-scroll-arrow {
     height: unset;
 
     & > div {
       background-color: #55555580;
-      border-radius: var(--radius-xs);
     }
   }
 }