feat(ui): refine mobile active state and fix desktop regression

- Restrict `VideoCard` mobile active state detection to mobile devices (<1024px) using `window.matchMedia`
- Tighten `IntersectionObserver` sweet spot to 10% (rootMargin: -45%) to prevent multiple cards being active
- Encapsulate mobile active CSS rules within media query to prevent desktop style regression
- Ensure proper marquee scrolling behavior on mobile by separating static and animated states
- Prevent layout blowouts by enforcing `min-width: 0` on flex containers

js/ui/components/VideoCard.js

@@ -3043,7 +3043,19 @@ export class VideoCard {
     if (!VideoCard.viewportObserver) {
       VideoCard.viewportObserver = new IntersectionObserver(
         (entries) => {
+          // Prevent active state on desktop to avoid conflicting with hover
+          const isDesktop =
+            typeof window !== "undefined" &&
+            window.matchMedia("(min-width: 1024px)").matches;
+
           for (const entry of entries) {
+            if (isDesktop) {
+              if (entry.target.hasAttribute("data-mobile-active")) {
+                entry.target.removeAttribute("data-mobile-active");
+              }
+              continue;
+            }
+
             if (entry.isIntersecting) {
               entry.target.setAttribute("data-mobile-active", "true");
             } else {
@@ -3051,7 +3063,7 @@ export class VideoCard {
             }
           }
         },
-        { rootMargin: "-25% 0px -25% 0px", threshold: 0 }
+        { rootMargin: "-45% 0px -45% 0px", threshold: 0 }
       );
     }
     VideoCard.viewportObserver.observe(element);