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>
</span> </span>
</Tooltip> </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 —
{notFull > 0 && ( when idle with only deep-history pending — the "N without full history" row), never on
<Tooltip hint={t("header.sync.fullHistoryTooltip")}> an orphaned line of its own. */}
<button {showMain && (
onClick={onGoToFullHistory} <div className="flex items-center justify-between gap-1.5">
className="flex items-center gap-1 hover:text-fg underline decoration-dotted decoration-muted/40 underline-offset-4 transition cursor-pointer" <span className="flex items-center gap-1.5 min-w-0">{stateNode}</span>
> {pauseBtn}
<History className="w-3.5 h-3.5" /> </div>
{t("header.sync.withoutFullHistory", { count: notFull })} )}
</button> {notFull > 0 && (
</Tooltip> <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> </div>
); );
} }