fix(ui): widen settings personal card

BunsDev · web-flow · commit 3156d94bcab0 · 2026-05-21T00:32:30.000-05:00
Widen the Control UI settings Personal quick-settings card to the intended 3/1 desktop split, keep Personal before Appearance/Automations at the narrower layout, and make the focused CSS assertions tolerant of harmless formatting changes. Verification: - pnpm --dir ui test src/styles/config-quick.test.ts - pnpm exec oxfmt --check --threads=1 ui/src/styles/config-quick.test.ts - git diff --check - GitHub CI on 4c8f6d7
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -748,6 +748,7 @@ Docs: https://docs.openclaw.ai
 - Require canonical node platform IDs [AI]. (#81880) Thanks @pgondhi987.
 - Agents/Azure OpenAI Responses: default unset Azure OpenAI API versions to `preview` so `/openai/v1/responses` calls use Azure's current Responses API route. (#82026) Thanks @leoge007.
 - Control UI/WebChat: compact the desktop chat header controls into a single aligned row so the session, model, thinking, and action controls no longer waste vertical space. Thanks @BunsDev.
+- Control UI/settings: widen the Personal quick-settings card to a 3/1 desktop split and keep Appearance/Automations below it on narrower layouts. Thanks @BunsDev.
 - Agents/model catalog: reuse manifest model-id normalization metadata while loading persisted read-only catalog rows, avoiding repeated metadata scans.
 - Agents: retry empty final turns for generic `anthropic-messages` providers instead of limiting non-visible recovery to Kimi, so custom/proxied Anthropic-compatible routes can recover with a visible answer. Addresses #46080. Thanks @wmgx, @w1tv, and @iFwu.
 - Agents/replies: strip workflow `<function_response>` scaffolding from user-visible sanitizer paths so raw tool output does not leak into chat history, transcript mirrors, or channel replies. Fixes #47444. Thanks @5toCode.
diff --git a/ui/src/styles/config-quick.css b/ui/src/styles/config-quick.css
@@ -132,7 +132,7 @@
 
 .qs-side-stack {
   display: grid;
-  grid-column: span 4;
+  grid-column: span 3;
   grid-template-rows: auto 1fr;
   align-self: stretch;
   gap: 14px;
@@ -168,7 +168,7 @@
 }
 
 .qs-card--personal {
-  grid-column: span 8;
+  grid-column: span 9;
 }
 
 .qs-card--personal .qs-identity-grid {
@@ -1211,11 +1211,11 @@
   }
 
   .qs-card--appearance {
-    order: 4;
+    order: 5;
   }
 
   .qs-card--personal {
-    order: 5;
+    order: 4;
   }
 
   .qs-card--automations {
diff --git a/ui/src/styles/config-quick.test.ts b/ui/src/styles/config-quick.test.ts
@@ -11,6 +11,12 @@ if (!cssPath) {
 }
 const css = readFileSync(cssPath, "utf8");
 
+function expectSelectorBlockToMatch(selector: string, pattern: RegExp) {
+  const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const blockMatches = [...css.matchAll(new RegExp(`${escapedSelector}\\s*\\{[^}]*\\}`, "gs"))];
+  expect(blockMatches.map((match) => match[0]).some((block) => pattern.test(block))).toBe(true);
+}
+
 describe("config-quick styles", () => {
   it("includes the local user identity quick-settings styles", () => {
     expect(css).toContain(".qs-identity-grid");
@@ -31,13 +37,15 @@ describe("config-quick styles", () => {
     expect(css).toContain(".qs-identity-card__actions");
     expect(css).toContain("grid-template-columns: repeat(12, minmax(0, 1fr));");
     expect(css).toContain("grid-column: 1 / -1;");
-    expect(css).toContain("grid-column: span 4;");
+    expectSelectorBlockToMatch(".qs-side-stack", /grid-column:\s*span\s+3;/);
+    expectSelectorBlockToMatch(".qs-card--personal", /grid-column:\s*span\s+9;/);
     expect(css).toContain("grid-template-columns: repeat(2, minmax(0, 1fr));");
     expect(css).toContain("align-items: stretch;");
     expect(css).toContain("display: contents;");
-    expect(css).toContain(".qs-card--appearance {\n    order: 4;");
+    expectSelectorBlockToMatch(".qs-card--personal", /order:\s*4;/);
+    expectSelectorBlockToMatch(".qs-card--appearance", /order:\s*5;/);
     expect(css).toContain(".qs-card--appearance");
-    expect(css).toContain("order: 4");
+    expect(css).toContain("order: 5");
     expect(css).toContain(".qs-card--automations");
     expect(css).toContain("order: 6");
   });

Original file line number	Diff line number	Diff line change
`@@ -132,7 +132,7 @@`
`132`	`132`
`133`	`133`	`.qs-side-stack {`
`134`	`134`	`display: grid;`
`135`		`- grid-column: span 4;`
	`135`	`+ grid-column: span 3;`
`136`	`136`	`grid-template-rows: auto 1fr;`
`137`	`137`	`align-self: stretch;`
`138`	`138`	`gap: 14px;`
`@@ -168,7 +168,7 @@`
`168`	`168`	`}`
`169`	`169`
`170`	`170`	`.qs-card--personal {`
`171`		`- grid-column: span 8;`
	`171`	`+ grid-column: span 9;`
`172`	`172`	`}`
`173`	`173`
`174`	`174`	`.qs-card--personal .qs-identity-grid {`
`@@ -1211,11 +1211,11 @@`
`1211`	`1211`	`}`
`1212`	`1212`
`1213`	`1213`	`.qs-card--appearance {`
`1214`		`- order: 4;`
	`1214`	`+ order: 5;`
`1215`	`1215`	`}`
`1216`	`1216`
`1217`	`1217`	`.qs-card--personal {`
`1218`		`- order: 5;`
	`1218`	`+ order: 4;`
`1219`	`1219`	`}`
`1220`	`1220`
`1221`	`1221`	`.qs-card--automations {`