fix(ui): let settings config pages grow with content (#104652)

* Fix settings config page scroll

* Fix config layout browser coverage

ui/src/pages/config/view.browser.test.ts

@@ -1,6 +1,7 @@
 // Control UI tests cover config behavior.
 import { render } from "lit";
 import { describe, expect, it, vi } from "vitest";
+import "../../styles.css";
 import type { ThemeMode, ThemeName } from "../../app/theme.ts";
 import { createConfigViewState, renderConfig, type ConfigProps } from "./view.ts";
 
@@ -64,6 +65,26 @@ describe("config view", () => {
     assistantName: "OpenClaw",
   });
 
+  it("lets config pages grow with their content instead of creating an inner viewport", async () => {
+    const { container } = renderConfigView({
+      activeSection: "__appearance__",
+      includeSections: ["__appearance__"],
+      customThemeImportExpanded: true,
+    });
+    document.body.append(container);
+
+    try {
+      await new Promise<void>((resolve) => {
+        requestAnimationFrame(() => resolve());
+      });
+
+      const content = queryRequired(container, ".config-content", HTMLElement);
+      expect(content.scrollHeight - content.clientHeight).toBeLessThanOrEqual(1);
+    } finally {
+      container.remove();
+    }
+  });
+
   function findActionButtons(container: HTMLElement): {
     clearButton?: HTMLButtonElement;
     saveButton?: HTMLButtonElement;

ui/src/styles/config.css

@@ -7,7 +7,6 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 0;
-  height: calc(100vh - 160px);
   margin: 12px 0 0;
   border-radius: var(--radius-xl);
   border: 1px solid var(--border);
@@ -2200,8 +2199,6 @@
 
 @media (max-width: 768px) {
   .config-layout {
-    height: calc(100vh - 100px);
-    height: calc(100dvh - 100px);
     margin: 8px 0 0;
     border-radius: var(--radius-md);
   }