From a9c77da3c4cc04406b2696621c622f1941e520ad Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 30 Oct 2025 18:01:44 +0200
Subject: [PATCH 1/2] feat(Details): improve selected video logic

---
 src/components/Video/Video.js    | 16 ++++++++++------
 src/components/Video/styles.less | 14 ++++++++++++++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/Video/Video.js b/src/components/Video/Video.js
index 21415153f..fe615e39f 100644
--- a/src/components/Video/Video.js
+++ b/src/components/Video/Video.js
@@ -73,15 +73,19 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
         const blurThumbnail = profile.settings.hideSpoilers && season && episode && !watched;
 
         React.useEffect(() => {
-            selected && !watched && ref.current?.scrollIntoView({
-                behavior: 'smooth',
-                block: 'nearest',
-                inline: 'start'
-            });
+            if (selected && ref.current) {
+                if ((progress && watched) || !watched) {
+                    ref.current.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                        inline: 'start'
+                    });
+                }
+            }
         }, [selected]);
 
         return (
-            <Button {...props} ref={ref} className={classnames(className, styles['video-container'])} title={title}>
+            <Button {...props} ref={ref} className={classnames(className, styles['video-container'], { [styles['selected']]: selected })} title={title}>
                 {
                     typeof thumbnail === 'string' && thumbnail.length > 0 ?
                         <div className={styles['thumbnail-container']}>
diff --git a/src/components/Video/styles.less b/src/components/Video/styles.less
index 0473ab9cb..b20563125 100644
--- a/src/components/Video/styles.less
+++ b/src/components/Video/styles.less
@@ -172,6 +172,20 @@
         }
     }
 
+    &.selected {
+        animation: border 3s ease-in-out forwards;
+    }
+
+    @keyframes border {
+        0% {
+            border: 2px solid var(--primary-accent-color);
+        }
+        100% {
+            border: 2px solid transparent;
+        }
+    }
+
+
     .context-menu-container {
         max-width: calc(90% - 1.5rem);
         z-index: 2;

From 75804bac10d24feb0e5a1fe211663daafb15f284 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 30 Oct 2025 18:21:40 +0200
Subject: [PATCH 2/2] refactor(Video): add scroll-margin

---
 src/components/Video/styles.less | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Video/styles.less b/src/components/Video/styles.less
index b20563125..f651ff70d 100644
--- a/src/components/Video/styles.less
+++ b/src/components/Video/styles.less
@@ -20,6 +20,10 @@
     margin-bottom: 0.5rem;
     border-radius: var(--border-radius);
 
+    @supports (scroll-margin: 1.25rem) {
+        scroll-margin: 1.25rem;
+    }
+
     &:hover,
     &:focus,
     &:global(.active) {
@@ -178,10 +182,10 @@
 
     @keyframes border {
         0% {
-            border: 2px solid var(--primary-accent-color);
+            border: 0.15rem solid var(--primary-accent-color);
         }
         100% {
-            border: 2px solid transparent;
+            border: 0.15rem solid transparent;
         }
     }