refactor(feed): let the caller decide where the mode's name fits

The xl breakpoint was a fact about the FEED's toolbar, hard-coded into
the switcher that E4's managers are meant to reuse — their rows are far
emptier and would have hidden the label for no reason. It's a prop now,
defaulting to icon-only.

The two views spans collapse into one builder, which also fixes a
regression I'd just added: splitting them put the exact-count tooltip on
the number alone, so hovering the word gave nothing.

frontend/src/components/VideoCard.tsx

@@ -356,15 +356,17 @@ function VideoCard({
   // Two shapes for the count: the stacked layouts read it as prose ("1.5K views · 2 min ago"), so
   // they need the word; the row's column doesn't — a table doesn't repeat its unit on every line,
   // and the tooltip has the exact figure anyway. Same tooltip either way.
-  const viewsTitle = video.view_count != null ? `${video.view_count.toLocaleString()} ${t("card.views")}` : "";
-  const viewsCount = video.view_count != null && (
-    <span title={viewsTitle}>{formatViews(video.view_count)}</span>
-  );
-  const views = video.view_count != null && (
-    <span title={viewsTitle}>
-      {formatViews(video.view_count)} {t("card.views")}
-    </span>
-  );
+  // One span either way, so the exact-count tooltip covers all of whatever is rendered: the stacked
+  // layouts read it as prose and need the word, the row's column doesn't — a table doesn't repeat
+  // its unit on every line.
+  const viewsCell = (withWord: boolean) =>
+    video.view_count != null && (
+      <span title={`${video.view_count.toLocaleString()} ${t("card.views")}`}>
+        {formatViews(video.view_count)}
+        {withWord && ` ${t("card.views")}`}
+      </span>
+    );
+  const views = viewsCell(true);
   const published = (
     <>
       {relativeTime(video.published_at)}
@@ -478,7 +480,7 @@ function VideoCard({
               holds the widest bare form ("101.7K" at 48) in either language — dropping the word
               took this from 144 and handed the difference to the title. */}
           <div className="shrink-0 w-16 text-sm text-muted text-right tabular-nums truncate hidden lg:block">
-            {viewsCount}
+            {viewsCell(false)}
           </div>
           <div className="shrink-0 w-48 text-sm text-muted truncate hidden xl:block">{published}</div>
           {/* Thumb draws this over the image; with no image it goes on the row itself. */}