From 4b0472b457ba7327097a2e43400a290cd0384856 Mon Sep 17 00:00:00 2001
From: AndnixSH <40742924+AndnixSH@users.noreply.github.com>
Date: Thu, 25 Jun 2026 22:35:37 +0200
Subject: [PATCH] fix(meta): stop addon dropdown scroll jumping + roomier
 series layout

The streams addon dropdown reset its scroll back to the selected option every time the option list grew (i.e. each addon finishing loading), because the scroll-into-view effect depended on the `selectedOption` object, which is recreated on every render. Key it on the stable selected `value` instead, so it only runs when the menu opens or the selection actually changes.

Also rework the series streams header: move the addon dropdown onto its own full-width row below the back-arrow + episode title (instead of cramming all three into one row), and raise the open menu's max-height to 60vh so more addons are visible at once.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../MultiselectMenu/Dropdown/Dropdown.tsx          |  8 +++-----
 src/routes/MetaDetails/StreamsList/styles.less     | 14 ++++++++++----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
index 00fd3ff6a..b75f9f887 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
@@ -22,8 +22,6 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
     const optionsRef = useRef(new Map());
     const containerRef = useRef(null);
 
-    const selectedOption = options.find((opt) => opt.value === value);
-
     const handleSetOptionRef = useCallback((optionValue: any) => (node: HTMLButtonElement | null) => {
         if (node) {
             optionsRef.current.set(optionValue, node);
@@ -37,8 +35,8 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
     }, [setLevel, level]);
 
     useEffect(() => {
-        if (menuOpen && selectedOption && containerRef.current) {
-            const selectedNode = optionsRef.current.get(selectedOption.value);
+        if (menuOpen && containerRef.current) {
+            const selectedNode = optionsRef.current.get(value);
             if (selectedNode) {
                 selectedNode.scrollIntoView({
                     behavior: 'smooth',
@@ -46,7 +44,7 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                 });
             }
         }
-    }, [menuOpen, selectedOption]);
+    }, [menuOpen, value]);
 
     return (
         <div
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index e6c7308f8..df73b8ff8 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -72,10 +72,11 @@
 
     .select-choices-wrapper {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         z-index: 2;
         margin: 1em 1em 0 1em;
-        gap: 0 0.5em;
+        gap: 0.75em 0.5em;
         overflow: visible;
 
         .back-button-container {
@@ -105,7 +106,8 @@
         }
 
         .episode-title {
-            min-width: 45%;
+            flex: 1 1 auto;
+            min-width: 0;
             color: var(--primary-foreground-color);
             white-space: nowrap;
             overflow: hidden;
@@ -113,10 +115,14 @@
         }
 
         .select-input-container {
-            min-width: 40%;
-            flex-grow: 1;
+            flex: 1 1 100%;
+            min-width: 0;
             background-color: none;
 
+            [role='listbox'] {
+                max-height: 60vh;
+            }
+
             &:hover, &:focus, &:global(.active) {
                 background-color: var(--overlay-color);
             }