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/eslint.config.js

@@ -380,8 +380,10 @@ const EDGED_LABEL = "/^(?=.*(^|\\s)rounded-(full|md|lg|xl|2xl)(\\s|$))(?=.*(^|\\
 const EDGED_LABEL_MESSAGE =
   "a static label with an edge reads as a pressable chip: use ui/Badge (flat, tonal) for a label that does nothing.";
 
-// A class name split by an interpolation: the text right after `${…}` starts with a variant (`hover:`).
-const SPLIT_CLASS = "/^[a-z][\\w-]*:[\\w\\[!-]/";
+// A class name split by an interpolation: the text right after `${…}` starts with a variant (`hover:`),
+// or the interpolation IS the variant and the text goes on with its class (`${NARROW}:w-24`, E28 S3f3).
+// A clock (`${m}:00`) and a URL (`${u}://`) are not classes.
+const SPLIT_CLASS = "/^([a-z][\\w-]*:[\\w\\[!-]|:[a-z\\[!])/";
 const SPLIT_CLASS_MESSAGE =
   "a class split by an interpolation (`${x}hover:…`): Tailwind never sees it whole and emits no CSS; write the class literally (a shared guard is the `act:` variant).";