archilyzer

commit dcd9f100c73ade24489169fad7c43fb56767d531
parent dda46eb4db9fda0e3c8a450c36094c7f0f1ad36d
Author: I Mean I'm Just Saying <imeanimjustsaying@kiwifarms.st>
Date:   Sun, 13 Sep 2026 11:20:44 -0400

channels: the corpus-wide buttons become outlines

Sync every channel, Full sweep every channel and Update all reports drop to
h-8 outlines so the header has one primary. Their result spans are unchanged
elements with unchanged labels; the cluster wraps them to their own line
when the header is narrow instead of stretching to fit them.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Diffstat:
M
editor/app/channels/components/RefreshAllReportsButton.tsx
 | 
6
++++--
M
editor/app/channels/components/SyncAllChannelsButton.tsx
 | 
11
++++++++---

2 files changed, 12 insertions(+), 5 deletions(-)
diff --git a/editor/app/channels/components/RefreshAllReportsButton.tsx b/editor/app/channels/components/RefreshAllReportsButton.tsx
@@ -28,13 +28,15 @@ export function RefreshAllReportsButton() {
 
   const running = status.kind === "running";
   return (
-    <div className="flex items-center gap-2">
+    // See SyncAllChannelsButton: an outline, and a result span that wraps to
+    // its own line rather than stretching the header cluster.
+    <div className="flex flex-wrap items-center justify-end gap-2">
       <button
         type="button"
         onClick={handleClick}
         disabled={running}
         aria-label="update all reports"
-        className="px-3 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 disabled:opacity-50"
+        className="h-8 rounded-md border border-border bg-transparent px-3 text-xs font-medium hover:bg-accent disabled:opacity-50"
       >
         {running ? "Updating…" : "Update all reports"}
       </button>
diff --git a/editor/app/channels/components/SyncAllChannelsButton.tsx b/editor/app/channels/components/SyncAllChannelsButton.tsx
@@ -29,14 +29,19 @@ export function SyncAllChannelsButton() {
   const running = status.kind === "running";
   const sweeping = status.kind === "running" && status.fullSweep;
   return (
-    <div className="flex items-center gap-2">
+    // OUTLINES, not fills. These sweep the whole pool and are reached for
+    // rarely; the page's one primary is "New channel". The result span is a
+    // flex item of this row and wraps to its own line when the header is
+    // narrow — same element, same label, just no longer forcing the cluster
+    // wider than the header.
+    <div className="flex flex-wrap items-center justify-end gap-2">
       <button
         type="button"
         onClick={() => handleClick(false)}
         disabled={running}
         aria-label="sync every channel"
         title="Sweeps the WHOLE channel pool, not just the channels shown here. Use a group's Sync for the visible scope."
-        className="px-3 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 disabled:opacity-50"
+        className="h-8 rounded-md border border-border bg-transparent px-3 text-xs font-medium hover:bg-accent disabled:opacity-50"
       >
         {running && !sweeping ? "Syncing…" : "Sync every channel"}
       </button>
@@ -49,7 +54,7 @@ export function SyncAllChannelsButton() {
         disabled={running}
         title="Re-read every channel's whole listing — the WHOLE pool, not just the channels shown here: refresh each video list and flag videos that have gone missing upstream."
         aria-label="full sweep every channel"
-        className="px-3 py-2 rounded-md border border-border text-sm font-medium hover:bg-muted disabled:opacity-50"
+        className="h-8 rounded-md border border-border bg-transparent px-3 text-xs font-medium hover:bg-accent disabled:opacity-50"
       >
         {sweeping ? "Sweeping…" : "Full sweep every channel"}
       </button>