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