peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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.
This commit is contained in:
npeter83 2026-07-04 04:41:13 +02:00
parent 391b8fda33
commit 214dac5862
1 changed files with 22 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/components/SyncStatus.tsx
View file

@ -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>
);
}