fix(hub): steady the show detail modal, and give a series its director

Opening a different season of the same show moved everything under the
synopsis, which is where the season control and the episode list are, so the
thing just clicked was no longer under the pointer.

- The synopsis is exactly three lines for a multi-season show, with a "read
  more" link floated into the third line box (-webkit-line-clamp only ever
  puts its ellipsis at the end of the last line and leaves no room after it).
  Clamped from above and pinned from below to the same number: a constant,
  not a range — a season summary runs two lines and the next one twelve, and
  a band still reads as a jump. Whether three lines is all of it depends on
  the modal's width, so it is measured in the browser and re-measured on a
  resize.
- The cast is clamped to two lines.
- SeasonMenu replaces SeasonTabs: the tab row scrolled sideways once a show
  had more seasons than fit, which is close to unusable on a phone. One
  trigger reading "Season 5 · 1997" and a menu of every season with its
  episode count, one row high whatever the season count.
- media_meta_resp.director was filled from the credits crew's job ==
  "Director", a movie shape. TMDB's aggregate tv_credits crew is routinely
  empty and never carries that job, so every show answered null and the modal
  dropped the line. It now comes from created_by on the show details. Cached
  show metadata keeps its null until TMDB_META_TTL_SECS expires or an
  operator re-matches.

The facts line is joined rather than concatenated (a title with no rating
used to open with " · ") and carries the show's own year next to the
director; the selected season's air year moved onto the picker.

test_video_detail_measured.py asserts rectangles through layout_probe.py, not
declarations: the picker's offset inside its own modal body is the same pixel
either way, the synopsis and cast heights, where the read-more link lands,
and the open menu at 320 px. Each measured block sits in a whole-pixel-height
container, or two identical layouts an eighth of a pixel apart round to tops
one pixel apart. test_tmdb_show_director.py covers the credit.
docs/mediacenter.md §10.4.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014UtzVrzM7e2tG9fSpkR9ML

1 files changed, 119 insertions, 13 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index fe01cd6..cb8cd44 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -3038,20 +3038,85 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
   padding: 16px 20px;
   overflow-y: auto;
 }
+/* The synopsis, and why it is not a -webkit-line-clamp.
+   Three lines, the third ending in "… Read more" rather than at the right
+   margin: line-clamp only ever puts its ellipsis at the end of the last line,
+   and cannot leave room for anything after it. A float can — .video-detail-
+   overview.clamped::before is a zero-width float two lines tall, so the
+   toggle floated after it (clear: right) lands on line three and shortens
+   that line box alone. The toggle is written before the text in video-app.js
+   for the same reason: a float only pushes the line boxes that follow it.
+   `.reserved` pins the same three lines from below for a multi-season show,
+   so the height is a constant and not a range: min and max are the same
+   number on purpose. A season whose synopsis runs two lines and one whose
+   synopsis runs twelve must put the season menu, and every episode under it,
+   at exactly the same place — anything less and the thing just clicked is no
+   longer under the pointer. Three lines is what makes that constant cheap:
+   at five, a short synopsis sat over three blank lines.
+   +2px absorbs the sub-pixel line height that otherwise clips the last
+   line's descenders. */
+.video-overview-wrap { --ov-lh: 1.5em; --ov-lines: 3; }
 .video-detail-overview {
   font-size: 0.9em;
   color: var(--text);
   line-height: 1.5;
 }
+.video-detail-overview.clamped {
+  overflow: hidden;
+  max-height: calc(var(--ov-lh) * var(--ov-lines) + 2px);
+}
+/* The same number as the max-height above, deliberately: clamped from above
+   and pinned from below is a constant, and a constant is the whole point. */
+.video-detail-overview.clamped.reserved {
+  min-height: calc(var(--ov-lh) * var(--ov-lines) + 2px);
+}
+/* Only when there is actually something to expand. `overflow: hidden` above
+   makes this a block formatting context, so it *contains* the float and grows
+   to its height — a one-line movie synopsis with the spacer always present
+   would stand two lines tall for no reason. `.has-more` is set by the measure
+   that decides to render the toggle at all. */
+.video-detail-overview.clamped.has-more::before {
+  content: '';
+  float: right;
+  width: 0;
+  height: calc(var(--ov-lh) * (var(--ov-lines) - 1));
+}
+.video-overview-toggle {
+  float: right;
+  clear: right;
+  padding: 0 0 0 6px;
+  border: none;
+  background: none;
+  color: var(--accent);
+  font: inherit;
+  cursor: pointer;
+}
+.video-overview-toggle:hover { text-decoration: underline; }
+.video-overview-toggle.standalone {
+  float: none;
+  display: inline-block;
+  padding: 0;
+  margin-top: 4px;
+  font-size: 0.9em;
+}
 .video-detail-facts {
   font-size: 0.82em;
   color: var(--text-dim);
   margin-top: 6px;
 }
+/* Two lines, ellipsised at the end of the second. A ten-name cast and a
+   three-name one must not give the modal two different heights — and unlike
+   the synopsis there is nothing to expand to, so the plain line clamp is the
+   right tool here. */
 .video-detail-cast {
   font-size: 0.82em;
   color: var(--text-secondary);
   margin-top: 6px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
 }
 .video-detail-source {
   font-size: 0.78em;
@@ -3169,25 +3234,66 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
 .video-flat-season { padding-left: 24px; margin-bottom: 8px; }
 .video-flat-season .video-season-header { margin: 6px 0 4px; }
 
-/* Season tab bar — docs/mediacenter.md §5.4's per-season overview view */
-.video-season-tabs {
+/* Season picker — docs/mediacenter.md §5.4's per-season overview view.
+   Was a row of pills with `overflow-x: auto`: a show with a dozen seasons hid
+   most of them behind a horizontal scrollbar, worst on the narrow screens that
+   can least afford it. One trigger and a menu is one row high whatever the
+   season count, so nothing below it moves either. The menu is absolutely
+   positioned inside .video-detail-body, which scrolls — the picker sits near
+   the top of that body, so the panel opens over the episode list rather than
+   past the bottom of the scroll area. */
+.video-season-menu { position: relative; margin: 10px 0; }
+.video-season-trigger {
   display: flex;
-  gap: 4px;
-  margin: 10px 0;
-  overflow-x: auto;
-}
-.video-season-tab {
-  padding: 5px 12px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
   border: 1px solid var(--border);
-  border-radius: 999px;
+  border-radius: 8px;
   background: var(--bg-surface);
-  color: var(--text-dim);
+  color: var(--text);
   font-size: 0.85em;
-  white-space: nowrap;
+  cursor: pointer;
+  text-align: left;
+}
+.video-season-trigger:hover { border-color: var(--accent); color: var(--accent); }
+.video-season-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.video-season-caret { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-dim); }
+
+.video-season-options {
+  position: absolute;
+  left: 0; right: 0; top: calc(100% + 4px);
+  z-index: 40;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: var(--shadow-lg);
+  padding: 4px 0;
+  /* Twenty-five seasons will not fit a phone: the panel scrolls, the modal
+     behind it does not have to. */
+  max-height: min(320px, 50vh);
+  overflow-y: auto;
+}
+.video-season-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 8px 14px;
+  border: none;
+  border-radius: 0;
+  background: none;
+  color: var(--text);
+  font-size: 0.85em;
+  text-align: left;
   cursor: pointer;
 }
-.video-season-tab:hover { border-color: var(--accent); color: var(--text); }
-.video-season-tab.active { border-color: var(--accent); color: var(--accent); background: var(--bg-raised); }
+.video-season-option:hover { background: var(--bg-raised); }
+.video-season-option.active { color: var(--accent); }
+.video-season-option-count { color: var(--text-dim); font-size: 0.85em; flex-shrink: 0; }
 
 /* No own margin/size: it sits in .video-admin-actions next to the plain
    .admin-btn "Re-match", and any extra here made the two different sizes. */