1 files changed, 48 insertions, 4 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/video-app.js b/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
index c709480..2fa22d0 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
@@ -459,8 +459,36 @@ function OverviewText({ text, reserve }) {
 // whether the show ran three seasons or twenty-five, which is also what keeps
 // the episode list below from moving when the season changes.
 
+// Where the panel goes, measured from the trigger. It cannot simply be an
+// absolutely positioned child: the modal clips (`overflow: hidden`, for its
+// rounded corners), and a show with a dozen seasons opens a panel taller than
+// the room left under the picker on anything but a tall window — the last
+// seasons then sit outside the modal where no scroll can reach them. Fixed to
+// the viewport and measured, it also flips above the trigger when that is
+// where the space is.
+const SEASON_PANEL_MAX = 320;
+const SEASON_PANEL_MIN = 120;
+const SEASON_PANEL_GAP = 12;
+
+function placeSeasonPanel(el) {
+  if (!el) return null;
+  const r = el.getBoundingClientRect();
+  const below = window.innerHeight - r.bottom - SEASON_PANEL_GAP;
+  const above = r.top - SEASON_PANEL_GAP;
+  const down = below >= Math.min(SEASON_PANEL_MAX, above);
+  const room = Math.max(SEASON_PANEL_MIN, Math.min(SEASON_PANEL_MAX, down ? below : above));
+  return {
+    left: `${r.left}px`,
+    width: `${r.width}px`,
+    top: down ? `${r.bottom + 4}px` : 'auto',
+    bottom: down ? 'auto' : `${window.innerHeight - r.top + 4}px`,
+    maxHeight: `${room}px`,
+  };
+}
+
 function SeasonMenu({ seasons, selected, selectedYear, onSelect }) {
   const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState(null);
   const ref = useRef(null);
 
   useEffect(() => {
@@ -477,28 +505,44 @@ function SeasonMenu({ seasons, selected, selectedYear, onSelect }) {
       e.stopPropagation();
       setOpen(false);
     };
+    // Nothing scrolls under an open panel — the detail body does not scroll
+    // for a show (only its episode list does) and the page behind the overlay
+    // cannot — so a resize is the only thing that can invalidate the
+    // measurement taken when it opened.
+    const replace = () => setPos(placeSeasonPanel(ref.current));
     document.addEventListener('click', close);
     document.addEventListener('keydown', onKey, true);
+    window.addEventListener('resize', replace);
     return () => {
       document.removeEventListener('click', close);
       document.removeEventListener('keydown', onKey, true);
+      window.removeEventListener('resize', replace);
     };
   }, [open]);
 
+  // Measured in the click, not in an effect after it: an effect would render
+  // the panel once at the wrong place and move it on the next frame.
+  const toggle = useCallback(() => {
+    setOpen((wasOpen) => {
+      if (!wasOpen) setPos(placeSeasonPanel(ref.current));
+      return !wasOpen;
+    });
+  }, []);
+
   const label = (n) => (n === 0 ? t('video.specials') : t('video.season_n', { n }));
 
   return html`
     <div class="video-season-menu" ref=${ref}>
       <button class="video-season-trigger" aria-haspopup="listbox"
         aria-expanded=${open ? 'true' : 'false'}
-        onClick=${() => setOpen((o) => !o)}>
+        onClick=${toggle}>
         <span class="video-season-current">
           ${label(selected)}${selectedYear ? ` · ${selectedYear}` : ''}
         </span>
         <${Icon} name="chevron" cls="video-season-caret ${open ? 'flip' : ''}" />
       </button>
-      ${open && html`
-        <div class="video-season-options" role="listbox">
+      ${open && pos && html`
+        <div class="video-season-options" role="listbox" style=${pos}>
           ${seasons.map((s) => html`
             <button key=${s.season} role="option"
               aria-selected=${s.season === selected ? 'true' : 'false'}
@@ -675,7 +719,7 @@ function VideoDetailModal({
     <div class="video-overlay" onClick=${(e) => {
       if (e.target.classList.contains('video-overlay')) onClose();
     }}>
-      <div class="video-detail">
+      <div class="video-detail ${showMultiSeason ? 'video-detail-steady' : ''}">
         <div class="video-top-bar">
           <span class="video-title">${(confident && meta.title) || title}</span>
           <button class="video-close" onClick=${onClose} title=${t('video.close')}>