From 83611af21dc2206e47716ddf923712f06f567806 Mon Sep 17 00:00:00 2001
From: xuans <likb_blue@163.com>
Date: Sat, 26 Sep 2026 22:32:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=88=9D=E5=A7=8B=E5=8C=96SM?=
 =?UTF-8?q?TP=E9=80=9A=E7=9F=A5=E5=A4=8D=E9=80=89=E6=A1=86=E4=B8=8E?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E6=B0=B4=E5=B9=B3=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/SetupWizard/SetupWizard.css     | 19 ++++++++++++++++-
 .../SetupWizard/SetupWizardLayout.test.js     | 21 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

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"