From 20a25cebd9370736871351d679a41acd8cdf6320 Mon Sep 17 00:00:00 2001 From: adlee-was-taken Date: Thu, 25 Jun 2026 18:38:37 -0400 Subject: [PATCH] fix(extension): drawer + lock-screen layout (center list, full-width lock) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Closed vault drawer now negates its 440px via margin-right so it reserves no layout space — the list pane and its empty state center in the full post-sidebar width instead of being shifted left by the off-screen drawer. - .vault-lock-screen gets flex:1 so the locked vault tab grows to full viewport width instead of collapsing to content width and pinning to the left. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01Pe8qw5KePDqAEBsAxnVQuJ --- extension/src/vault/vault.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/extension/src/vault/vault.css b/extension/src/vault/vault.css index ac3f975..7143dba 100644 --- a/extension/src/vault/vault.css +++ b/extension/src/vault/vault.css @@ -1361,12 +1361,18 @@ textarea { background: var(--bg-elevated, #161b22); overflow-y: auto; transform: translateX(100%); - transition: transform 0.2s ease; + /* Closed: negate the 440px so the column reserves no layout space — the list + pane (and its empty state) then center in the full post-sidebar width + instead of being shifted left by the off-screen drawer. Opening restores + the width and slides the drawer in. */ + margin-right: -440px; + transition: transform 0.2s ease, margin-right 0.2s ease; flex-shrink: 0; } .vault-drawer--open { transform: translateX(0); + margin-right: 0; } /* Empty state — centered, gold-accented icon, polished */ @@ -1689,6 +1695,10 @@ textarea { /* --- Lock screen (vault tab) --- */ .vault-lock-screen { + /* #vault-app is a flex row (for the unlocked 3-column shell); when locked, + this is its sole child and must grow to the full viewport width or it + collapses to content width and pins to the left. */ + flex: 1; display: flex; flex-direction: column; align-items: center;