fix(sync): keep the pause control inline in the nav rail, not on an orphan line

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

@@ -128,19 +128,29 @@ export default function SyncStatus({
             </span>
           </span>
         </Tooltip>
-        {showMain && <div className="flex items-center gap-1.5">{stateNode}</div>}
+        {/* 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 && (
-          <Tooltip hint={t("header.sync.fullHistoryTooltip")}>
+          <div className="flex items-center justify-between gap-1.5">
-            <button
+            <Tooltip hint={t("header.sync.fullHistoryTooltip")}>
-              onClick={onGoToFullHistory}
+              <button
-              className="flex items-center gap-1 hover:text-fg underline decoration-dotted decoration-muted/40 underline-offset-4 transition cursor-pointer"
+                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 })}
+                <History className="w-3.5 h-3.5" />
-            </button>
+                {t("header.sync.withoutFullHistory", { count: notFull })}
-          </Tooltip>
+              </button>
+            </Tooltip>
+            {!showMain && pauseBtn}
+          </div>
         )}
-        {pauseBtn && <div className="pt-0.5">{pauseBtn}</div>}
       </div>
     );
   }