Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-09 04:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(meta): stop addon dropdown scroll jumping + roomier series layout

Browse source 
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>
This commit is contained in:
AndnixSH 2026-06-25 22:35:37 +02:00
parent 2b5ab44a50
commit 4b0472b457
2 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/MultiselectMenu/Dropdown/Dropdown.tsx
View file

@ -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

14
src/routes/MetaDetails/StreamsList/styles.less
View file

@ -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);
}