feat(channel): on a tablet the header's words give their room to the tags

Below xl the action row drops "Prio" (the stepper's tooltip names it) and
the Subscribed button's word (a check glyph; its name stays in the
aria-label). On an iPad at 820 px with touch-sized targets the tag lane
grows from 29 px, a sliver of its control, to 130 px.

frontend/src/modules/feed/ChannelPage.tsx

@@ -474,7 +474,10 @@ export default function ChannelPage({
               />
               {/* Unfolded, the actions share the tabs' line and the tag lane gives way ("+N"). Folded, Back
               and the name take that room, so at a tablet width the actions wrap onto a line of their
-              own rather than push the page sideways (min-w-0 let them overflow: 1072 px at 1024). */}
+              own rather than push the page sideways (min-w-0 let them overflow: 1072 px at 1024).
+              Below `xl` the row's two words ("Prio", "Subscribed") give their room to the tags: on an
+              iPad (820 px, 44 px touch targets) the tag lane was left 29 px, a sliver of its control.
+              The stepper names itself by its tooltip, the button by its aria-label and tooltip. */}
               <div className={`ml-2 flex flex-1 items-center gap-2 ${folded ? "" : "min-w-0"}`}>
                 <IconLink
                   href={ytUrl}
@@ -498,7 +501,9 @@ export default function ChannelPage({
                 )}
                 {ch?.subscribed && (
                   <div className="inline-flex items-center gap-1.5 h-9 px-2.5 rounded-lg border border-border">
-                    <span className="text-xs text-muted">{t("channels.cols.priority")}</span>
+                    <span className="hidden text-xs text-muted xl:inline">
+                      {t("channels.cols.priority")}
+                    </span>
                     <PriorityStepper
                       priority={ch.priority}
                       onPriority={(d) => bumpPriority(channelId, d)}
@@ -571,9 +576,10 @@ export default function ChannelPage({
                       onClick={onUnsubscribe}
                       loading={unsubscribe.isPending}
                       title={t("channel.unsubscribe")}
+                      aria-label={t("channel.subscribedState")}
                       icon={<Check className="w-4 h-4" />}
                     >
-                      {t("channel.subscribedState")}
+                      <span className="hidden xl:inline">{t("channel.subscribedState")}</span>
                     </Button>
                   ) : (
                     <Button