feat(design): the three 375 rows (E28 S3f3)

- Download row: answers to its own width (container query); below 40rem
  it stacks: picture beside a two-line title, the meta line across the
  row (one line, never wraps: zoomed on the iPad its pieces broke apart),
  then the source link and the actions on one wrapping line. The paste
  field takes a line of its own when the buttons would squeeze it.
- YT playlist row: below 42rem the length rides on the picture and the
  title runs two lines over the channel.
- Channels tag row: the suggestions take a line of their own below
  40rem (the chip lane was 0 px and the row's menu off the screen).
- Pager: on a phone the arrows drop their words (names kept), and the
  size label stays one line.
- Lint: a class split where the interpolation is the variant itself
  (${NARROW}:w-24) is refused too; it had shipped with no CSS.

frontend/src/components/Channels.tsx

@@ -585,11 +585,13 @@ export default function Channels() {
       <PageToolbar>
         {tabs}
         {view === "subscribed" && (
-          <div className="px-4 pt-2 pb-2 max-w-384 mx-auto">
-            {/* One non-wrapping row: the TAGS editor trigger (left) + the tag-filter chip lane (folds
-          overflow into "+N") + Clear, then the catalog "…" actions pinned right. It never wraps, so the
-          "…" menu always stays on the first line. Channel-name search lives in the shared top SearchBar. */}
-            <div className="flex items-center gap-2 min-w-0">
+          <div className="@container/tagrow px-4 pt-2 pb-2 max-w-384 mx-auto">
+            {/* One row: the TAGS editor trigger (left) + the tag-filter chip lane (folds overflow into
+          "+N") + Clear, then the catalog "…" actions pinned right, so the "…" menu always stays on the
+          first line. Only the suggestions block wraps: below 40rem it takes a line of its own under
+          the row (E28 S3f3, the owner's pick A) — at 375 it had squeezed the chip lane to 0 px and
+          pushed the "…" off the screen. Channel-name search lives in the shared top SearchBar. */}
+            <div className="flex flex-wrap items-center gap-2 min-w-0">
               {/* The "TAGS" label IS the tags-editor trigger (pencil), replacing the separate
                   "Manage tags" button; the tooltip explains what tags are + that it's clickable. */}
               <Tooltip hint={t("channels.tags.yourTagsHint")}>
@@ -617,7 +619,10 @@ export default function Channels() {
                   one-click bulk-accept for the high-confidence ones. The per-row ghost chips handle the
                   rest. Hidden when there's nothing to suggest. */}
               {visibleSuggestions.length > 0 && (
-                <div className="shrink-0 flex items-center gap-1.5">
+                <div
+                  data-tag-suggestions
+                  className="shrink-0 flex items-center gap-1.5 @max-[40rem]/tagrow:order-last @max-[40rem]/tagrow:basis-full"
+                >
                   <Tooltip hint={t("channels.tags.suggestionsHint")}>
                     <Badge tone="accent">
                       <Sparkles />