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

fix(ext/login): constrain lower form sections to .form-grid envelope (P3)

Browse Source 
Notes, custom-fields disclosure, attachments disclosure, and form-actions
in fullscreen logins now sit inside a .form-lower wrapper with the same
max-width: 960px; margin: 0 auto envelope as .form-grid above. Removes
the visual rhythm break at the 2-col -> full-width transition.

Popup keeps its current single-column behavior (gated on surface flag).
This commit is contained in:
adlee-was-taken
2026-05-02 19:07:33 -04:00
parent b2fc56709a
commit 631e9af470
2 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
extension/src/popup/components/types/login.ts
View File

@@ -357,19 +357,21 @@ export function renderForm(
${sectionsHtml} ${sectionsHtml}
<div class="form-group"> <div class="${surface === 'fullscreen' ? 'form-lower' : ''}">
<div class="notes-with-toggle"> <div class="form-group">
<label class="label" for="f-notes" style="margin:0;flex:1;">notes</label> <div class="notes-with-toggle">
<button id="notes-mono-btn" class="glyph-btn" type="button" title="toggle monospace">≡</button> <label class="label" for="f-notes" style="margin:0;flex:1;">notes</label>
<button id="notes-mono-btn" class="glyph-btn" type="button" title="toggle monospace">≡</button>
</div>
<textarea id="f-notes" placeholder="recovery codes, security questions...">${escapeHtml(notes)}</textarea>
</div> </div>
<textarea id="f-notes" placeholder="recovery codes, security questions...">${escapeHtml(notes)}</textarea>
</div>
${renderSectionsEditor(sectionsDraft, sectionsExpanded)} ${renderSectionsEditor(sectionsDraft, sectionsExpanded)}
${isInTab() ? renderAttachmentsDisclosure({ itemId: existing?.id ?? '', attachments: attachmentsDraft, mode: 'edit' }) : ''} ${isInTab() ? renderAttachmentsDisclosure({ itemId: existing?.id ?? '', attachments: attachmentsDraft, mode: 'edit' }) : ''}
<div class="form-actions" ${externalActions ? 'hidden' : ''}> <div class="form-actions" ${externalActions ? 'hidden' : ''}>
<button class="btn" id="cancel-btn">cancel</button> <button class="btn" id="cancel-btn">cancel</button>
<button class="btn btn-primary" id="save-btn">${state.loading ? '<span class="spinner"></span>' : 'save'}</button> <button class="btn btn-primary" id="save-btn">${state.loading ? '<span class="spinner"></span>' : 'save'}</button>
</div>
</div> </div>
</div> </div>
`; `;

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

@@ -1626,6 +1626,20 @@ textarea {
@media (max-width: 720px) { @media (max-width: 720px) {
.form-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; }
} }
/* P3: lower form sections constrained to the same envelope as .form-grid.
Gated on surface === 'fullscreen' in login.ts; popup unaffected. */
.form-lower {
max-width: 960px;
margin: 0 auto;
}
.form-lower > .form-group,
.form-lower > .disclosure,
.form-lower > .attachments-disclosure,
.form-lower > .form-actions {
width: 100%;
}
.form-col { .form-col {
padding: 14px 16px; padding: 14px 16px;
} }