feat(player): the big view's bar is glyphs only, and its way out stays in sight

On an iPad the bar's labelled row outgrew the screen and its last control,
leaving the big view, scrolled off the right. Every control is its glyph
now, named by its label and tooltip as in the windowed player; the controls
scroll on a narrow window while fullscreen and leave stay pinned right.

frontend/src/features/player/playerModalControls.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import { ListEnd, ListStart, Repeat, Repeat1, Shuffle, SkipBack, SkipForward } from "lucide-react";
 import type { VideoDetail } from "../../lib/api";
 import type { AutoMode, LoopMode } from "../../lib/playerModes";
-import { Button } from "../../components/ui/Button";
 import { IconButton } from "../../components/ui/IconButton";
 import { StateMessage } from "../../components/ui/QueryState";
 import { ClampedText } from "../../components/ui/ClampedText";
@@ -15,11 +14,11 @@ import { renderDescription } from "./descriptionLinks";
 
 /** The queue transport cluster — prev / counter / next, then the auto-advance and loop modes.
  *  Rendered in two places from ONE list of controls: the modal's queue bar (`variant:"modal"`, normal
- *  glass theme, glyphs only so the whole cluster fits one line of the side panel) and the big-view
- *  docked control bar (`variant:"docked"`, white-on-dark, labels shown from a breakpoint up). What a
- *  control does, its glyph and its tooltip are said once; only the primitive and the label's
- *  visibility differ. Every control's tooltip carries its full name (and the shortcut, where it has
- *  one), so a glyph-only one still says what it does and which mode it is in. The modes are cycles,
+ *  glass theme) and the big-view docked control bar (`variant:"docked"`, white-on-dark). Glyphs only
+ *  in both: the docked bar once spoke the names from a width up, and on an iPad its row outgrew the
+ *  screen. What a control does, its glyph and its tooltip are said once; only the look differs.
+ *  Every control's tooltip carries its full name (and the shortcut, where it has one), so a glyph
+ *  still says what it does and which mode it is in. The modes are cycles,
  *  not switches: `lit` when not off, and the name says which. Auto-advance wears list glyphs of its
  *  own — the skip arrows are Previous / Next, beside it (DESIGN.md "A glyph means one thing"). The
  *  wrapper (fragment vs. bordered row) stays at the call site. */
@@ -51,7 +50,8 @@ export function PlayerTransportControls({
 }) {
   const { t } = useTranslation();
   const docked = variant === "docked";
-  const counter = docked ? "tabular-nums text-white/70" : "text-muted tabular-nums";
+  // Never broken or squeezed: in a row that scrolls, a squeezed "1 / 55" stood on three lines.
+  const counter = `shrink-0 whitespace-nowrap tabular-nums ${docked ? "text-white/70" : "text-muted"}`;
   const divider = docked ? "h-4 w-px bg-white/20" : "w-px h-4 bg-border";
   const autoName = `${t("player.autoAdvance.label")}: ${t(`player.autoAdvance.${autoMode}`)}`;
   const loopName = `${t("player.loop.label")}: ${t(`player.loop.${loopMode}`)}`;
@@ -63,10 +63,6 @@ export function PlayerTransportControls({
     onClick: () => void;
     disabled?: boolean;
     lit?: boolean;
-    /** From which width the docked bar shows the name beside the glyph. */
-    labelFrom: "sm" | "md";
-    /** The glyph after the name (Next points the way it goes). */
-    trailing?: boolean;
   };
   const step: Control[] = [
     {
@@ -76,7 +72,6 @@ export function PlayerTransportControls({
       title: `${t("player.previous")} · Shift+←`,
       onClick: onPrev,
       disabled: !canPrev,
-      labelFrom: "sm",
     },
     {
       key: "next",
@@ -85,8 +80,6 @@ export function PlayerTransportControls({
       title: `${t("player.next")} · Shift+→`,
       onClick: onNext,
       disabled: !canNext,
-      labelFrom: "sm",
-      trailing: true,
     },
   ];
   // Persistent playback settings — cycle on click, saved to your account.
@@ -99,7 +92,6 @@ export function PlayerTransportControls({
       title: `${autoName} · ${t("player.autoAdvance.hint")}`,
       onClick: onCycleAuto,
       lit: autoMode !== "off",
-      labelFrom: "md",
     },
     {
       key: "loop",
@@ -108,39 +100,21 @@ export function PlayerTransportControls({
       title: `${loopName} · ${t("player.loop.hint")}`,
       onClick: onCycleLoop,
       lit: loopMode !== "off",
-      labelFrom: "md",
     },
   ];
-  const render = (c: Control) =>
-    docked ? (
-      <Button
-        key={c.key}
-        variant="overlay"
-        size="sm"
-        icon={c.trailing ? undefined : c.glyph}
-        onClick={c.onClick}
-        disabled={c.disabled}
-        lit={c.lit}
-        label={c.name}
-        title={c.title}
-      >
-        <span className={c.labelFrom === "sm" ? "hidden sm:inline" : "hidden md:inline"}>
-          {c.name}
-        </span>
-        {c.trailing && c.glyph}
-      </Button>
-    ) : (
-      <IconButton
-        key={c.key}
-        onClick={c.onClick}
-        disabled={c.disabled}
-        lit={c.lit}
-        label={c.name}
-        title={c.title}
-      >
-        {c.glyph}
-      </IconButton>
-    );
+  const render = (c: Control) => (
+    <IconButton
+      key={c.key}
+      variant={docked ? "overlay" : undefined}
+      onClick={c.onClick}
+      disabled={c.disabled}
+      lit={c.lit}
+      label={c.name}
+      title={c.title}
+    >
+      {c.glyph}
+    </IconButton>
+  );
   return (
     <>
       {render(step[0]!)}