PR #56924: fix(ui): prevent overview access grid layout overlap on resize

• Repository: openclaw/openclaw
• Author: bbddbb1
• State: open | merged: False
• Link: https://github.com/openclaw/openclaw/pull/56924

Description (problem / solution / changelog)

Summary

• Problem: Token/password visibility toggle buttons overlap with their input fields in the Overview page when the browser window is narrowed
• Why it matters: Poor UX on smaller screens or narrow browser windows prevents users from interacting with these fields properly
• What changed: Added explicit box-sizing, flex-shrink, and min-width properties to the visibility toggle buttons and their flex containers to ensure proper flex behavior at any width
• What did NOT change: No behavioral changes to the visibility toggling functionality itself

Change Type (select all)

• Bug fix
• Feature
• Refactor required for the fix
• Docs
• Security hardening
• Chore/infra

Scope (select all touched areas)

• Gateway / orchestration
• Skills / tool execution
• Auth / tokens
• Memory / storage
• Integrations
• API / contracts
• UI / DX
• CI/CD / infra

Linked Issue/PR

• Closes #56921
• Related
• This PR fixes a bug or regression

Root Cause / Regression History

• Root cause: The inline width: 36px on .btn--icon buttons without explicit box-sizing: border-box caused the flex container's gap: 8px and input's flex: 1 to calculate incorrectly at narrow widths, resulting in overlap
• Missing detection/guardrail: No CSS constraint prevented the button from exceeding its intended visual width
• Prior context: This is a layout issue in the overview access section that appears at specific viewport widths

Regression Test Plan

• Coverage level that should have caught this:
  • Unit test
  • Seam / integration test
  • End-to-end test (visual/browser testing)
  • Existing coverage already sufficient
• Target test or file: Browser E2E tests for overview page responsiveness
• Scenario the test should lock in: Verify no layout overlap at 400px viewport width
• Why this is the smallest reliable guardrail: Visual/responsive testing is needed to catch CSS layout issues
• Existing test that already covers this (if any): None found
• If no new test is added, why not: CSS layout issues require browser-based visual testing which is covered by manual verification

User-visible / Behavior Changes

• Token and password visibility toggle buttons no longer overlap with their input fields at any browser width
• No functional changes to visibility toggling behavior

Diagram

Before (narrow width): <img width="910" height="83" alt="image" src="https://github.com/user-attachments/assets/4cdc0ae3-d157-41a4-8b3f-851f80be1bb0" /> After (narrow width): <img width="919" height="82" alt="image" src="https://github.com/user-attachments/assets/53e7310d-ccc0-4f3a-b346-385d3af04452" />

Security Impact

• New permissions/capabilities? No
• Secrets/tokens handling changed? No
• New/changed network calls? No
• Command/tool execution surface changed? No
• Data access scope changed? No

Repro + Verification

Environment

• OS: Any
• Runtime/container: Development
• Model/provider: N/A
• Integration/channel (if any): Control UI

Steps

1. Start gateway on port 18789
2. Start UI dev server on port 5173
3. Open http://localhost:5173/?gatewayUrl=ws://127.0.0.1:18789
4. Navigate to Overview page
5. Resize browser window to narrow widths (400px, 500px, 600px)
6. Observe token and password visibility toggle buttons

Expected

No overlap between input fields and their visibility toggle buttons at any width

Actual

Buttons overlap at narrow widths (before fix)

Human Verification

• Verified scenarios: Tested at 400px, 500px, 800px, 1200px viewport widths
• Edge cases checked: Toggle state (show/hide), different input content lengths
• What I did not verify: Browser-specific rendering differences

Compatibility / Migration

• Backward compatible? Yes
• Config/env changes? No
• Migration needed? No

Risks and Mitigations

• None: This is a pure CSS layout fix with no functional changes

Changed files

• ui/src/ui/views/overview.ts (modified, +6/-6)

PR #56937: fix: prevent input/toggle overlap in Overview access section at narrow widths

• Repository: openclaw/openclaw
• Author: lml2468
• State: open | merged: False
• Link: https://github.com/openclaw/openclaw/pull/56937

Description (problem / solution / changelog)

Summary

At narrow browser widths (~400px), the token and password visibility toggle buttons overlap with their respective input fields in the Control UI Overview access section.

Root Cause

The flex container did not constrain the input to shrink properly — flex items default to min-width: auto, preventing them from shrinking below their content size. The toggle button was pushed on top of the input at narrow widths.

Changes

• Added min-width: 0 to both token and password input fields so they can shrink within the flex container
• Added flex-shrink: 0 to both toggle buttons so they maintain their fixed 36x36px dimensions and are never squeezed

Testing

Visual fix verified by inspecting the layout. Existing tests pass.

Fixes openclaw/openclaw#56921

Changed files

• ui/src/ui/views/overview.ts (modified, +4/-4)