Zaki/Password-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(settings): widen the settings panel for the left tab column

Browse Source 
Side-mode settings panel (420px) clipped its content (Clear cache button) now
that the vertical tab column eats ~100px. Bumped #settingsPanel to 520px (id
beats .slideover's 420; entry #slideover unchanged). Nudged centered height
620→660.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
r-zakarya
2026-07-10 05:14:49 +01:00
parent c59a595d1d
commit a0a6fa8834
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+5 -1
View File
@@ -2071,6 +2071,10 @@ input[type="range"]::-webkit-slider-thumb {
z-index: 50; z-index: 50;
} }
.slideover.is-open { transform: translateX(0); } .slideover.is-open { transform: translateX(0); }
/* Settings needs more width than the entry editor — the left tab column eats
~100px. Only #settingsPanel; #slideover stays 420. (Center mode already
sets its own 520.) */
#settingsPanel { width: 520px; }
/* Suppress the slide animation when the panel is closed — otherwise /* Suppress the slide animation when the panel is closed — otherwise
changing editor-position animates the off-screen position from right changing editor-position animates the off-screen position from right
to left and the panel briefly crosses the viewport. */ to left and the panel briefly crosses the viewport. */
@@ -2115,7 +2119,7 @@ body[data-editor-position="center"] #settingsPanel {
/* Settings gets a FIXED height in centered mode so switching tabs (short vs /* Settings gets a FIXED height in centered mode so switching tabs (short vs
long) doesn't resize + re-center the modal. Entry #slideover stays long) doesn't resize + re-center the modal. Entry #slideover stays
content-sized (grows with the form). */ content-sized (grows with the form). */
body[data-editor-position="center"] #settingsPanel { height: min(88vh, 620px); } body[data-editor-position="center"] #settingsPanel { height: min(90vh, 660px); }
body[data-editor-position="center"] #slideover.is-open, body[data-editor-position="center"] #slideover.is-open,
body[data-editor-position="center"] #settingsPanel.is-open { body[data-editor-position="center"] #settingsPanel.is-open {
transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1);