From 4c3ce3355a90b7c75f04fe25444662fe485b833a Mon Sep 17 00:00:00 2001 From: splitsec2 <35583321+splitsec2@users.noreply.github.com> Date: Wed, 4 Nov 2026 16:07:35 -0600 Subject: [PATCH] fix(ui): give release source tabs their own row on phones (#1663) Fixes #1662, thanks @mietu111 for the report and the screenshot. The source tabs share a row with up to five icons, which take 240px on a phone. On a 393px screen that leaves 113px for the tabs, so Prowlarr fits and Direct Download is down to a sliver. On a 360px screen not even Prowlarr fits. The scrollbar is hidden, so there is also nothing to tell you there is more to scroll to. With more than one source, the tabs now get their own row below the sm breakpoint and the icons sit on a row beneath them. Picking a tab also scrolls it into view, for when there are too many sources to fit. This does make the sticky header 36px taller on phones. One source and anything sm or wider stay on a single row, with the same tab positions and row height as before. I checked this with screenshots of the dialog using mocked search results, at 360 and 393px with two sources, 360px with five, 393px with one, and at 640 and 1280px with two. The filter menu and manual query panel still open correctly from the new row at 393px. There are no layout tests for this dialog, so I did not add one. Before, with Direct Download selected. The tab has 113px of space and its label is cut off. download After, with Direct Download selected. Both tabs fit and the icons sit on the row beneath. download ## Summary by CodeRabbit * **Improvements** * The active source tab is centered in the tab strip when selected. * On narrow screens, multiple source tabs wrap onto their own row, and the result count is hidden. --- src/frontend/src/components/ReleaseModal.tsx | 27 +++++++++++++++++--- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/components/ReleaseModal.tsx b/src/frontend/src/components/ReleaseModal.tsx index 409a95ef..300d3e07 100644 --- a/src/frontend/src/components/ReleaseModal.tsx +++ b/src/frontend/src/components/ReleaseModal.tsx @@ -914,6 +914,18 @@ const ReleaseModalSession = ({ const tabRefs = useRef>({}); const tabIndicatorStyle = useTabIndicator(tabRefs, activeTab, allTabs); + const tabStripRef = useRef(null); + + // The strip's scrollbar is hidden, so bring the selected tab fully into view. This sets + // the strip's own scrollLeft: scrollIntoView would also scroll the modal vertically. + const selectTab = (name: string, tab: HTMLButtonElement) => { + setActiveTab(name); + const strip = tabStripRef.current; + strip?.scrollTo({ + left: tab.offsetLeft - (strip.clientWidth - tab.offsetWidth) / 2, + behavior: 'smooth', + }); + }; // Get unique formats from current releases for filter dropdown // Only show formats that are in the supported list @@ -1814,9 +1826,16 @@ const ReleaseModalSession = ({ )} {!sourcesLoading && allTabs.length > 0 && ( -
- {/* Tabs - scrollable on narrow screens */} -
+
1 ? 'flex-wrap sm:flex-nowrap' : ''}`} + > + {/* Tabs - scrollable on narrow screens. With more than one source they get + their own row on phones, because the controls would otherwise leave + them about 110px. */} +
1 ? 'basis-full sm:basis-0' : ''}`} + >
{/* Sliding indicator */}
{ tabRefs.current[tab.name] = el; }} - onClick={() => setActiveTab(tab.name)} + onClick={(event) => selectTab(tab.name, event.currentTarget)} className={`border-b-2 border-transparent px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors ${ activeTab === tab.name ? 'text-emerald-600 dark:text-emerald-400'