diff --git a/frontend/src/views/SetupWizard/SetupWizard.css b/frontend/src/views/SetupWizard/SetupWizard.css index 7c395a7..1f6672e 100644 --- a/frontend/src/views/SetupWizard/SetupWizard.css +++ b/frontend/src/views/SetupWizard/SetupWizard.css @@ -1134,11 +1134,28 @@ button:disabled { line-height: 1.35; } -.setup-notification-step input, +.setup-notification-step input:not([type="checkbox"]), .setup-notification-step select { height: 34px; } +.setup-notification-step .confirm-row { + align-items: center; +} + +.setup-notification-step .confirm-row > input[type="checkbox"] { + width: 16px; + height: 16px; + min-height: 16px; + margin: 0; + padding: 0; +} + +.setup-notification-step .confirm-row strong { + display: flex; + align-items: center; +} + .setup-notification-step textarea { min-height: 48px; } diff --git a/frontend/src/views/SetupWizard/SetupWizardLayout.test.js b/frontend/src/views/SetupWizard/SetupWizardLayout.test.js index c6847f5..24c540c 100644 --- a/frontend/src/views/SetupWizard/SetupWizardLayout.test.js +++ b/frontend/src/views/SetupWizard/SetupWizardLayout.test.js @@ -52,6 +52,27 @@ test("notification step exposes SMTP only and keeps sender fields in its panel", assert.ok(find(advanced, hasClass("email-option-grid"))); }); +test("notification checkboxes stay compact and centered with their labels", () => { + const css = readFileSync(new URL("./SetupWizard.css", import.meta.url), "utf8"); + assert.doesNotMatch(css, /\.setup-notification-step input\s*[,\{]/); + assert.match(css, /\.setup-notification-step input:not\(\[type="checkbox"\]\)/); + const rule = (selector) => { + const body = css.slice(css.indexOf(`${selector} {`) + selector.length + 2).split("}")[0]; + assert.ok(css.includes(`${selector} {`), selector); + return body; + }; + assert.match(rule(".setup-notification-step .confirm-row"), /align-items:\s*center/); + const checkbox = rule('.setup-notification-step .confirm-row > input[type="checkbox"]'); + for (const property of ["width", "height", "min-height"]) { + assert.match(checkbox, new RegExp(`${property}:\\s*16px`)); + } + assert.match(checkbox, /margin:\s*0;/); + assert.match(checkbox, /padding:\s*0;/); + const title = rule(".setup-notification-step .confirm-row strong"); + assert.match(title, /display:\s*flex/); + assert.match(title, /align-items:\s*center/); +}); + test("account heading precedes the two-column account fields", () => { const root = template("./SetupWizard.vue"); const card = find(root, (node) => node.tag === "fieldset"