fix(control-ui): contain access settings fields (#77171)

* fix(control-ui): contain access settings fields

* docs: update changelog for access overflow fix

* fix(control-ui): preserve archived session defaults

CHANGELOG.md

@@ -70,6 +70,7 @@ Docs: https://docs.openclaw.ai
 - Media/images: keep HEIC/HEIF attachments fail-closed when optional Sharp conversion is unavailable instead of sending originals that still need conversion. Thanks @vincentkoc.
 - Google Meet: fork the caller's current agent transcript into agent-mode meeting consultant sessions, so Meet replies inherit the context from the tool call that joined the meeting.
 - iOS/mobile pairing: reject non-loopback `ws://` setup URLs before QR/setup-code issuance and let the iOS Gateway settings screen scan QR codes or paste full setup-code messages. Thanks @BunsDev.
+- Control UI: keep Gateway Access inputs and locale picker contained inside the card at narrow and tablet widths.
 - Telegram/streaming: sanitize tool-progress draft preview backticks before shared compaction, so long backtick-heavy progress text still renders inside the safe code-formatted preview instead of collapsing to an ellipsis.
 - UI/chat: remove the unsupported `line-clamp` declaration from the chat queue text rule to eliminate Firefox console noise without changing visible truncation behavior. Thanks @ZanderH-code.
 - Agents/Pi: suppress persistence for synthetic mid-turn overflow continuation prompts, so transcript-retry recovery does not write the "continue from transcript" prompt as a new user turn. Thanks @vincentkoc.

ui/src/styles/components.css

@@ -5552,7 +5552,18 @@ td.data-table-key-col {
 .ov-access-grid {
   display: grid;
   gap: 12px;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+}
+
+.ov-access-grid .field {
+  min-width: 0;
+}
+
+.ov-access-grid .field input,
+.ov-access-grid .field select {
+  box-sizing: border-box;
+  min-width: 0;
+  width: 100%;
 }
 
 .ov-access-grid__full {

ui/src/styles/components.test.ts

@@ -34,3 +34,17 @@ describe("sessions filter styles", () => {
     expect(css).toContain(".sessions-filter-bar {\n    flex-direction: column;");
   });
 });
+
+describe("overview access grid styles", () => {
+  it("keeps access fields and native controls within the card", () => {
+    const css = readComponentsCss();
+
+    expect(css).toContain(
+      "grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));",
+    );
+    expect(css).toContain(".ov-access-grid .field {\n  min-width: 0;");
+    expect(css).toContain(".ov-access-grid .field input,\n.ov-access-grid .field select {");
+    expect(css).toContain("box-sizing: border-box;");
+    expect(css).toContain("width: 100%;");
+  });
+});

ui/src/ui/app-render.helpers.ts

@@ -661,7 +661,7 @@ export async function createChatSession(state: AppViewState) {
       limit: 0,
       includeGlobal: true,
       includeUnknown: true,
-      showArchived: state.sessionsShowArchived,
+      showArchived: state.sessionsShowArchived ?? false,
     },
   );
   if (
@@ -692,7 +692,7 @@ async function refreshSessionOptions(state: AppViewState) {
     limit: 0,
     includeGlobal: true,
     includeUnknown: true,
-    showArchived: state.sessionsShowArchived,
+    showArchived: state.sessionsShowArchived ?? false,
   });
 }
 

ui/src/ui/chat/session-controls.ts

@@ -77,7 +77,7 @@ async function refreshSessionOptions(state: AppViewState) {
     limit: 0,
     includeGlobal: true,
     includeUnknown: true,
-    showArchived: state.sessionsShowArchived,
+    showArchived: state.sessionsShowArchived ?? false,
   });
 }