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).
This commit is contained in:
@@ -357,6 +357,7 @@ export function renderForm(
|
||||
|
||||
${sectionsHtml}
|
||||
|
||||
<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>
|
||||
@@ -372,6 +373,7 @@ export function renderForm(
|
||||
<button class="btn btn-primary" id="save-btn">${state.loading ? '<span class="spinner"></span>' : 'save'}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const rerender = (): void => {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user