将数据库连接参数调整为三列两行并适配矮屏

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;
   }
 }

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\)\)/);
+});