From ca949d22dee5bc49c671227d28cf910a8b16fc31 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Thu, 8 Oct 2026 02:25:58 +0200
Subject: [PATCH] fix(player): the channel line wraps instead of squeezing the
 meta into a column

On a narrow card (a tablet, a zoomed window) the unwrapped row of name, meta and
actions left the meta a one-word column. The row now wraps: the meta keeps at
least 12rem, and the actions move down together.
---
 frontend/src/components/PlayerModal.tsx | 103 ++++++++++++------------
 1 file changed, 53 insertions(+), 50 deletions(-)

diff --git a/frontend/src/components/PlayerModal.tsx b/frontend/src/components/PlayerModal.tsx
index 6d9cac7f..ae4f2b94 100644
--- a/frontend/src/components/PlayerModal.tsx
+++ b/frontend/src/components/PlayerModal.tsx
@@ -145,6 +145,9 @@ const metaSep = (
   </span>
 );
 const META_OWN_LINE = "w-full [&>span:first-child>[data-meta-sep]]:hidden";
+// Beside the channel name the meta takes what is left of the line, but never less than this: under it
+// the line wraps and the meta, or the actions after it, move down instead of squeezing.
+const META_MIN = "min-w-48 flex-1";
 
 export default function PlayerModal({
   video,
@@ -961,10 +964,13 @@ export default function PlayerModal({
                   </Button>
                 </div>
 
-                {/* Channel + meta on one line, with the watched toggle pushed to the right.
+                {/* Channel + meta on one line, with the actions pushed to the right.
               When navigated to a linked video we only have its author (from the player),
-              so we show that as plain text and hide feed-video-specific bits. */}
-                <div className={`flex items-center gap-3 mt-3 ${wide ? "flex-wrap" : ""}`}>
+              so we show that as plain text and hide feed-video-specific bits.
+              It wraps: the meta never gets narrower than META_MIN, and the actions move down as one
+              group. Unwrapped, a narrow card (a tablet, a zoomed window) squeezed the meta into a
+              one-word column between the name and the buttons. */}
+                <div className="flex flex-wrap items-center gap-x-3 gap-y-2 mt-3">
                   {!navigated && (
                     <Avatar
                       src={active.channel_thumbnail}
@@ -1012,7 +1018,7 @@ export default function PlayerModal({
                   )}
                   {!navigated ? (
                     <div
-                      className={`flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm text-muted min-w-0 ${wide ? META_OWN_LINE : ""}`}
+                      className={`flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm text-muted ${wide ? META_OWN_LINE : META_MIN}`}
                     >
                       {active.view_count != null && (
                         <span>
@@ -1043,7 +1049,7 @@ export default function PlayerModal({
                   ) : (
                     // Linked video's stats come from the (already-fetched) video detail.
                     <div
-                      className={`flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm text-muted min-w-0 ${wide ? META_OWN_LINE : ""}`}
+                      className={`flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm text-muted ${wide ? META_OWN_LINE : META_MIN}`}
                     >
                       {detail.data?.view_count != null && (
                         <span>
@@ -1076,51 +1082,48 @@ export default function PlayerModal({
                 own (which hides our chrome). Mirrors the F key (maximise, a CSS big view); from there
                 the docked bar offers OUR true fullscreen. */}
                   {!navigated && (
-                    <IconButton
-                      variant="outline"
-                      size="md"
-                      onClick={toggleFullscreen}
-                      label={t("player.fullscreen")}
-                      title={`${t("player.fullscreen")} · F`}
-                      // Narrow: the actions end the channel line. Wide: their own line in the panel.
-                      className={wide ? undefined : "ml-auto"}
-                    >
-                      <Maximize />
-                    </IconButton>
-                  )}
-                  {!navigated && <AddToPlaylist videoId={active.id} variant="outline" size="md" />}
-                  {!navigated && (
-                    <DownloadButton
-                      videoId={active.id}
-                      title={active.title}
-                      variant="outline"
-                      size="md"
-                    />
-                  )}
-                  {!navigated && onRemoveFromList && (
-                    <IconButton
-                      variant="outline-danger"
-                      size="md"
-                      onClick={() => void removeFromList()}
-                      // Named with its object, like the list's menu row: a bare "Remove" among Fullscreen /
-                      // Download / Mark watched reads as "delete this video".
-                      label={t("playlists.removeItemOf", { title: active.title })}
-                      title={t("playlists.removeItem")}
-                    >
-                      <Trash2 />
-                    </IconButton>
-                  )}
-                  {!navigated && (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      pressed={watched}
-                      onClick={() => setWatched(!watched)}
-                      title={watched ? t("player.watchedUnmark") : t("player.markWatched")}
-                      icon={watched ? <CheckCheck /> : <Check />}
-                    >
-                      {watched ? t("player.watched") : t("player.markWatched")}
-                    </Button>
+                    // Narrow: the actions end the channel line. Wide: their own line in the panel.
+                    <div className={`flex items-center gap-3 ${wide ? "flex-wrap" : "ml-auto"}`}>
+                      <IconButton
+                        variant="outline"
+                        size="md"
+                        onClick={toggleFullscreen}
+                        label={t("player.fullscreen")}
+                        title={`${t("player.fullscreen")} · F`}
+                      >
+                        <Maximize />
+                      </IconButton>
+                      <AddToPlaylist videoId={active.id} variant="outline" size="md" />
+                      <DownloadButton
+                        videoId={active.id}
+                        title={active.title}
+                        variant="outline"
+                        size="md"
+                      />
+                      {onRemoveFromList && (
+                        <IconButton
+                          variant="outline-danger"
+                          size="md"
+                          onClick={() => void removeFromList()}
+                          // Named with its object, like the list's menu row: a bare "Remove" among Fullscreen /
+                          // Download / Mark watched reads as "delete this video".
+                          label={t("playlists.removeItemOf", { title: active.title })}
+                          title={t("playlists.removeItem")}
+                        >
+                          <Trash2 />
+                        </IconButton>
+                      )}
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        pressed={watched}
+                        onClick={() => setWatched(!watched)}
+                        title={watched ? t("player.watchedUnmark") : t("player.markWatched")}
+                        icon={watched ? <CheckCheck /> : <Check />}
+                      >
+                        {watched ? t("player.watched") : t("player.markWatched")}
+                      </Button>
+                    </div>
                   )}
                 </div>
                 {wide && (