From 214dac5862650394ce20b3d6e27357e8c8ac6cef Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sat, 4 Jul 2026 04:41:13 +0200
Subject: [PATCH] fix(sync): keep the pause control inline in the nav rail, not
 on an orphan line
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In the left-nav rail SyncStatus, the pause button rendered as its own bottom block, so with only
deep-history pending (idle) it dropped to a lonely line under 'N without full history'. Now it sits
right-aligned on the primary status row — the sync-state line when there is one, otherwise the
'N without full history' row — via flex justify-between. No change to the all-synced state.
---
 frontend/src/components/SyncStatus.tsx | 34 +++++++++++++++++---------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/SyncStatus.tsx b/frontend/src/components/SyncStatus.tsx
index 435d70d..c3d7bcf 100644
--- a/frontend/src/components/SyncStatus.tsx
+++ b/frontend/src/components/SyncStatus.tsx
@@ -128,19 +128,29 @@ export default function SyncStatus({
             </span>
           </span>
         </Tooltip>
-        {showMain && <div className="flex items-center gap-1.5">{stateNode}</div>}
-        {notFull > 0 && (
-          <Tooltip hint={t("header.sync.fullHistoryTooltip")}>
-            <button
-              onClick={onGoToFullHistory}
-              className="flex items-center gap-1 hover:text-fg underline decoration-dotted decoration-muted/40 underline-offset-4 transition cursor-pointer"
-            >
-              <History className="w-3.5 h-3.5" />
-              {t("header.sync.withoutFullHistory", { count: notFull })}
-            </button>
-          </Tooltip>
+        {/* Pause sits inline at the right end of the primary status row (the sync state, or —
+            when idle with only deep-history pending — the "N without full history" row), never on
+            an orphaned line of its own. */}
+        {showMain && (
+          <div className="flex items-center justify-between gap-1.5">
+            <span className="flex items-center gap-1.5 min-w-0">{stateNode}</span>
+            {pauseBtn}
+          </div>
+        )}
+        {notFull > 0 && (
+          <div className="flex items-center justify-between gap-1.5">
+            <Tooltip hint={t("header.sync.fullHistoryTooltip")}>
+              <button
+                onClick={onGoToFullHistory}
+                className="flex items-center gap-1 hover:text-fg underline decoration-dotted decoration-muted/40 underline-offset-4 transition cursor-pointer"
+              >
+                <History className="w-3.5 h-3.5" />
+                {t("header.sync.withoutFullHistory", { count: notFull })}
+              </button>
+            </Tooltip>
+            {!showMain && pauseBtn}
+          </div>
         )}
-        {pauseBtn && <div className="pt-0.5">{pauseBtn}</div>}
       </div>
     );
   }