From 22c6808016a53daf4151e8451683aec3c27f2331 Mon Sep 17 00:00:00 2001
From: xuans <likb_blue@163.com>
Date: Sun, 20 Sep 2026 23:50:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=86=E6=95=B0=E6=8D=AE=E5=BA=93=E8=BF=9E?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=82=E6=95=B0=E8=B0=83=E6=95=B4=E4=B8=BA=E4=B8=89?=
 =?UTF-8?q?=E5=88=97=E4=B8=A4=E8=A1=8C=E5=B9=B6=E9=80=82=E9=85=8D=E7=9F=AE?=
 =?UTF-8?q?=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/SetupWizard/SetupWizardLayout.css   | 26 ++++++++++++++++---
 .../SetupWizard/SetupWizardLayout.test.js     | 16 ++++++++++++
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/SetupWizard/SetupWizardLayout.css b/frontend/src/views/SetupWizard/SetupWizardLayout.css
index d8fc6a4..0c1369a 100644
--- a/frontend/src/views/SetupWizard/SetupWizardLayout.css
+++ b/frontend/src/views/SetupWizard/SetupWizardLayout.css
@@ -213,7 +213,7 @@
   }
 
   .access-shell--setup .database-connection-grid {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     align-items: end;
   }
 
@@ -361,8 +361,26 @@
   }
 }
 
-@media (min-width: 901px) and (max-width: 1279px) {
-  .access-shell--setup .database-connection-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+@media (min-width: 901px) and (max-height: 760px) {
+  .access-shell--setup .setup-card:has(.admin-account-grid) > header > div {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+  }
+
+  .access-shell--setup .setup-step-card:has(.admin-account-grid) {
+    padding-block: 6px;
+  }
+
+  .access-shell--setup .setup-step-card:has(.admin-account-grid) > .setup-section-heading:not(.admin-account-heading) {
+    margin-top: 6px;
+  }
+
+  .access-shell--setup .setup-step-card:has(.admin-account-grid) .database-setup {
+    gap: 2px;
+  }
+
+  .access-shell--setup .setup-step-card:has(.admin-account-grid) > .reset-preview {
+    margin-top: 6px;
   }
 }
diff --git a/frontend/src/views/SetupWizard/SetupWizardLayout.test.js b/frontend/src/views/SetupWizard/SetupWizardLayout.test.js
index d6872ef..966c523 100644
--- a/frontend/src/views/SetupWizard/SetupWizardLayout.test.js
+++ b/frontend/src/views/SetupWizard/SetupWizardLayout.test.js
@@ -53,3 +53,19 @@ test("database heading precedes selection, verification and connection fields",
   assert.ok(find(section.children[selection], (node) => node.tag === "button"));
   assert.ok(find(section.children[heading], (node) => node.tag === "HelpTip"));
 });
+
+test("database connection fields retain their two-row desktop order", () => {
+  const grid = find(template("./DatabaseSetup.vue"), hasClass("database-connection-grid"));
+  const fields = grid.children.filter((node) => node.tag === "label").map((label) => {
+    const input = find(label, (node) => node.tag === "input");
+    return input.props.find((prop) => prop.name === "id").value.content;
+  });
+  assert.deepEqual(fields, [
+    "database-host", "database-port", "database-name",
+    "database-username", "database-password", "database-root-certificate",
+  ]);
+  const css = readFileSync(new URL("./SetupWizardLayout.css", import.meta.url), "utf8");
+  const rules = [...css.matchAll(/\.access-shell--setup \.database-connection-grid\s*\{([^}]+)\}/g)];
+  assert.equal(rules.length, 1);
+  assert.match(rules[0][1], /grid-template-columns:\s*repeat\(3, minmax\(0, 1fr\)\)/);
+});