From 631e9af470e1abbdbf780acb9fac53c18d4a924f Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sat, 2 May 2026 19:07:33 -0400
Subject: [PATCH] fix(ext/login): constrain lower form sections to .form-grid
 envelope (P3)

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).
---
 extension/src/popup/components/types/login.ts | 24 ++++++++++---------
 extension/src/vault/vault.css                 | 14 +++++++++++
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/extension/src/popup/components/types/login.ts b/extension/src/popup/components/types/login.ts
index 4a1c2d3..6c7665e 100644
--- a/extension/src/popup/components/types/login.ts
+++ b/extension/src/popup/components/types/login.ts
@@ -357,19 +357,21 @@ export function renderForm(
 
       ${sectionsHtml}
 
-      <div class="form-group">
-        <div class="notes-with-toggle">
-          <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 class="${surface === 'fullscreen' ? 'form-lower' : ''}">
+        <div class="form-group">
+          <div class="notes-with-toggle">
+            <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>
-        <textarea id="f-notes" placeholder="recovery codes, security questions...">${escapeHtml(notes)}</textarea>
-      </div>
 
-      ${renderSectionsEditor(sectionsDraft, sectionsExpanded)}
-      ${isInTab() ? renderAttachmentsDisclosure({ itemId: existing?.id ?? '', attachments: attachmentsDraft, mode: 'edit' }) : ''}
-      <div class="form-actions" ${externalActions ? 'hidden' : ''}>
-        <button class="btn" id="cancel-btn">cancel</button>
-        <button class="btn btn-primary" id="save-btn">${state.loading ? '<span class="spinner"></span>' : 'save'}</button>
+        ${renderSectionsEditor(sectionsDraft, sectionsExpanded)}
+        ${isInTab() ? renderAttachmentsDisclosure({ itemId: existing?.id ?? '', attachments: attachmentsDraft, mode: 'edit' }) : ''}
+        <div class="form-actions" ${externalActions ? 'hidden' : ''}>
+          <button class="btn" id="cancel-btn">cancel</button>
+          <button class="btn btn-primary" id="save-btn">${state.loading ? '<span class="spinner"></span>' : 'save'}</button>
+        </div>
       </div>
     </div>
   `;
diff --git a/extension/src/vault/vault.css b/extension/src/vault/vault.css
index a0b765f..6555200 100644
--- a/extension/src/vault/vault.css
+++ b/extension/src/vault/vault.css
@@ -1626,6 +1626,20 @@ textarea {
 @media (max-width: 720px) {
   .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 {
   padding: 14px 16px;
 }