fix: pin toolbar above content on KeychainManager page (#666)

* fix: pin toolbar above content on KeychainManager page

* fix: apply panel offset to outer wrapper so toolbar is not covered

The aside panel is rendered as an absolute overlay (right-0, w-[380px]),
so any container covered by the overlay needs mr-[380px] to avoid
having its right-side controls obscured. Previously only the inner
scroll area had the offset, which left the toolbar at full width —
its right-side controls (view-mode dropdown, etc.) would be covered
by the panel and become unclickable when it opened.

Move both the margin and the transition to the outer flex wrapper so
the toolbar and the scroll area shift together when the panel opens.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: yuzifu <yuzifu@TB16PGen5.Info>
Co-authored-by: bincxz <16399091+binaricat@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
yuzifu
2026-04-09 17:14:41 +08:00
committed by GitHub
parent 9935eb2ed1
commit 9667c03ddc
+7 -4
View File
@@ -515,12 +515,12 @@ echo $3 >> "$FILE"`);
{/* Main Content */}
<div
className={cn(
"flex-1 overflow-y-auto transition-all duration-200",
"flex-1 flex flex-col min-h-0 transition-all duration-200",
panel.type !== "closed" && "mr-[380px]",
)}
>
{/* Toolbar */}
<div className="flex flex-wrap items-center gap-3 bg-secondary/60 border-b border-border/70 px-3 py-1.5">
<div className="flex flex-wrap items-center gap-3 bg-secondary/60 border-b border-border/70 px-3 py-1.5 shrink-0">
{/* Filter Tabs */}
<div className="flex items-center gap-1">
{/* KEY button with split interaction: left=switch view, right=dropdown */}
@@ -684,8 +684,10 @@ echo $3 >> "$FILE"`);
</div>
</div>
{/* Keys Section */}
<div className="space-y-3 p-3">
{/* Scrollable Content */}
<div className="flex-1 overflow-y-auto">
{/* Keys Section */}
<div className="space-y-3 p-3">
<div className="flex items-center justify-between">
<h2 className="text-base font-semibold text-muted-foreground">
{t("keychain.section.keys")}
@@ -817,6 +819,7 @@ echo $3 >> "$FILE"`);
</div>
</div>
)}
</div>
</div>
{/* Slide-out Panel */}