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 1/3] 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 --- .../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 (
Date: Wed, 15 Jul 2026 08:35:23 +0200 Subject: [PATCH 2/3] Revert improved dropdown layout --- src/routes/MetaDetails/StreamsList/styles.less | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less index df73b8ff8..e6c7308f8 100644 --- a/src/routes/MetaDetails/StreamsList/styles.less +++ b/src/routes/MetaDetails/StreamsList/styles.less @@ -72,11 +72,10 @@ .select-choices-wrapper { display: flex; - flex-wrap: wrap; align-items: center; z-index: 2; margin: 1em 1em 0 1em; - gap: 0.75em 0.5em; + gap: 0 0.5em; overflow: visible; .back-button-container { @@ -106,8 +105,7 @@ } .episode-title { - flex: 1 1 auto; - min-width: 0; + min-width: 45%; color: var(--primary-foreground-color); white-space: nowrap; overflow: hidden; @@ -115,14 +113,10 @@ } .select-input-container { - flex: 1 1 100%; - min-width: 0; + min-width: 40%; + flex-grow: 1; background-color: none; - [role='listbox'] { - max-height: 60vh; - } - &:hover, &:focus, &:global(.active) { background-color: var(--overlay-color); } From 0c9734394b26eac8a21586537468d12f4b95b0ba Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Fri, 17 Jul 2026 14:21:16 +0300 Subject: [PATCH 3/3] fix: scroll to selected option after loading --- src/components/MultiselectMenu/Dropdown/Dropdown.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx index b75f9f887..682eece06 100644 --- a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx +++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx @@ -21,6 +21,7 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props const { t } = useTranslation(); const optionsRef = useRef(new Map()); const containerRef = useRef(null); + const selectedOptionValue = options.find((opt) => opt.value === value)?.value; const handleSetOptionRef = useCallback((optionValue: any) => (node: HTMLButtonElement | null) => { if (node) { @@ -35,8 +36,8 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props }, [setLevel, level]); useEffect(() => { - if (menuOpen && containerRef.current) { - const selectedNode = optionsRef.current.get(value); + if (menuOpen && selectedOptionValue !== undefined && containerRef.current) { + const selectedNode = optionsRef.current.get(selectedOptionValue); if (selectedNode) { selectedNode.scrollIntoView({ behavior: 'smooth', @@ -44,7 +45,7 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props }); } } - }, [menuOpen, value]); + }, [menuOpen, selectedOptionValue]); return (