alee/relicario
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat(ext/vault): sticky save bar in fullscreen forms

Browse Source 
The form pane gets a flex column layout: scrollable content above,
sticky save bar at bottom. Bar uses translucent fill with backdrop-blur
and a 24px gradient fade so content scrolls under it. Save / cancel
buttons reuse the form's existing handlers via externalActions flag.
This commit is contained in:
adlee-was-taken
2026-05-02 15:05:09 -04:00
parent a28b456191
commit b270dfedb4
4 changed files with 111 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
extension/src/vault/vault.css
View File

@@ -1605,3 +1605,39 @@ textarea {
padding-bottom: 6px;
margin-bottom: 12px;
}
/* Phase 2B: sticky save bar + scrollable form pane */
.form-pane {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.form-scroll {
flex: 1;
overflow-y: auto;
padding: 20px 24px;
}
.sticky-save-bar {
position: sticky;
bottom: 0;
background: rgba(17, 22, 30, 0.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-top: 1px solid var(--border-mid);
padding: 12px 24px;
display: flex;
justify-content: flex-end;
gap: 8px;
z-index: 10;
}
.sticky-save-bar::before {
content: '';
position: absolute;
top: -24px;
left: 0;
right: 0;
height: 24px;
background: linear-gradient(to top, rgba(17, 22, 30, 0.7), transparent);
pointer-events: none;
}