fix(header): sit the sync chip with the pills, shorten its tooltip

Pinning it to the header's right edge read fine on a narrow window and stranded
it on a wide one — it's a status, but it's still part of the pill row. It now
follows the search bar.

Its tooltip was the long explanation of the counts, which is redundant next to a
popover that spells them out and overflowed the viewport from the right edge.
The chip gets the counts themselves; the explanation moves onto the popover's
counts row, where there's room for it.

frontend/src/components/Header.tsx

@@ -119,11 +119,9 @@ export default function Header({
         canNext={multiModule}
       />
       {search}
-      {/* Per-user sync status — global, not per-module, so it rides the right end of the header
-          rather than costing the nav rail a whole block. */}
-      <div className="ml-auto">
-        <SyncStatus isAdmin={me.role === "admin"} onGoToFullHistory={onGoToFullHistory} />
-      </div>
+      {/* Per-user sync status — it used to cost the nav rail a whole block. It sits with the other
+          pills rather than pinned to the far right: on a wide window that just strands it. */}
+      <SyncStatus isAdmin={me.role === "admin"} onGoToFullHistory={onGoToFullHistory} />
     </div>
   );
 }

frontend/src/components/SyncStatus.tsx

@@ -100,6 +100,9 @@ export default function SyncStatus({
   // popover. An accent dot flags the only two things worth interrupting you for (paused / missing
   // history) so the collapsed chip still tells you when to look.
   const needsAttention = data.paused || notFull > 0;
+  const countsText = `${formatViews(data.my_videos)} ${t("header.sync.yours")} / ${formatViews(
+    data.total_videos
+  )} ${t("header.sync.total")}`;
   return (
     <div className="pointer-events-auto shrink-0">
       <button
@@ -109,7 +112,9 @@ export default function SyncStatus({
           if (r) setPos({ top: r.bottom + 8, right: window.innerWidth - r.right });
           setOpen((o) => !o);
         }}
-        title={t("header.sync.countTooltip")}
+        // Short label only: the popover already explains the numbers, and the long one overflowed
+        // the viewport edge from here.
+        title={countsText}
         aria-expanded={open}
         className="glass glass-hover relative flex items-center gap-1.5 px-2.5 py-1.5 rounded-xl text-xs text-muted"
       >
@@ -131,7 +136,10 @@ export default function SyncStatus({
             style={{ position: "fixed", top: pos.top, right: pos.right }}
             className="glass-menu w-64 rounded-xl p-3 z-50 text-xs text-muted animate-[popIn_0.16s_ease]"
           >
-            <div className="flex items-center gap-1.5 pb-2 border-b border-border/60">
+            <div
+              title={t("header.sync.countTooltip")}
+              className="flex items-center gap-1.5 pb-2 border-b border-border/60"
+            >
               <Database className="w-3.5 h-3.5 shrink-0" />
               <span>
                 <span className="text-fg font-medium">{formatViews(data.my_videos)}</span>{" "}