PR #59315: fix(ui): keep approval modal actions reachable

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

Description (problem / solution / changelog)

Summary

• Problem: long exec and plugin approval payloads can make the shared approval modal taller than the viewport, which pushes the action buttons out of reach in the Web UI.
• Why it matters: users can get stuck on a blocking approval prompt with no reachable way to allow or deny the request.
• What changed: bounded the shared approval card height, moved modal content into a scrollable body, kept the action row outside that scroll region, and applied the same layout to gateway URL confirmation.
• What did NOT change (scope boundary): no approval policy, auth, routing, or channel-side approval behavior changed.

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 #59195
• Related #50980
• This PR fixes a bug or regression

Root Cause / Regression History (if applicable)

• Root cause: the shared approval modal card in ui/src/styles/components.css had no internal scroll region or height bound, so long command/plugin text could push the action buttons below the viewport.
• Missing detection / guardrail: there was no UI render test asserting that the shared approval body stays separate from the action row for long approval payloads.
• Prior context (git blame, prior PR, issue, or refactor if known): the issue report in #59195 matches the current shared modal structure used by both exec approvals and gateway URL confirmation.
• Why this regressed now: plugin descriptions and long commands can now easily exceed the available viewport height, but the modal layout still assumed short content.
• If unknown, what was ruled out: this is not specific to Gmail OAuth; the overflow is in the shared Web UI approval surface.

Regression Test Plan (if applicable)

• Coverage level that should have caught this:
  • Unit test
  • Seam / integration test
  • End-to-end test
  • Existing coverage already sufficient
• Target test or file: ui/src/ui/views/chat.test.ts
• Scenario the test should lock in: long approval content renders inside a dedicated .exec-approval-body while the shared action row remains the last child of the modal card.
• Why this is the smallest reliable guardrail: the bug is a pure view-layout regression in shared Lit templates, so a jsdom render test catches the structural contract without needing a full browser harness.
• Existing test that already covers this (if any): none.
• If no new test is added, why not: N/A

User-visible / Behavior Changes

• Long exec approval and plugin approval prompts in the Web UI now keep Allow once, Always allow, and Deny reachable by scrolling the modal body instead of letting the whole card overflow off-screen.
• Gateway URL confirmation now uses the same bounded, scrollable modal layout.

Diagram (if applicable)

Before:
[long approval content] -> [modal grows past viewport] -> [action buttons fall off-screen]

After:
[long approval content] -> [scrollable modal body] -> [fixed action row remains reachable]

Security Impact (required)

• New permissions/capabilities? (Yes/No) No
• Secrets/tokens handling changed? (Yes/No) No
• New/changed network calls? (Yes/No) No
• Command/tool execution surface changed? (Yes/No) No
• Data access scope changed? (Yes/No) No
• If any Yes, explain risk + mitigation: N/A

Repro + Verification

Environment

• OS: macOS 25.3.0
• Runtime/container: local Node/pnpm dev environment
• Model/provider: N/A
• Integration/channel (if any): Web UI shared approval modal
• Relevant config (redacted): default local config

Steps

1. Trigger an exec or plugin approval that includes a long command or long multi-line description.
2. Open the approval prompt in the Web UI.
3. Try to reach the decision buttons when the content exceeds the viewport height.

Expected

• The modal body scrolls and the action buttons remain reachable.

Actual

• Before this change, the modal could grow past the viewport and leave the action buttons inaccessible.

Evidence

Attach at least one:

• Failing test/log before + passing after
• Trace/log snippets
• Screenshot/recording
• Perf numbers (if relevant)

Verification commands run locally:

• pnpm test -- ui/src/ui/views/chat.test.ts
• pnpm build
• pnpm check
• pnpm test (hit an unrelated failure in src/tts/status-config.test.ts)

Human Verification (required)

What you personally verified (not just CI), and how:

• Verified scenarios: targeted jsdom coverage for the shared exec approval modal and gateway URL confirmation modal; local pnpm build; local pnpm check.
• Edge cases checked: long command content, shared error rendering inside the scrollable body, and gateway URL confirmation reusing the same modal layout.
• What you did not verify: a live browser screenshot/recording of the modal before and after.

Review Conversations

• I replied to or resolved every bot review conversation I addressed in this PR.
• I left unresolved only the conversations that still need reviewer or maintainer judgment.

Compatibility / Migration

• Backward compatible? (Yes/No) Yes
• Config/env changes? (Yes/No) No
• Migration needed? (Yes/No) No
• If yes, exact upgrade steps: N/A

Risks and Mitigations

• Risk: modal body sizing could feel tighter on very short viewports.
  • Mitigation: only the body scrolls; the action row and existing mobile button stacking remain unchanged.

Additional Context

• AI assistance: this PR was prepared with AI assistance.
• Testing degree: targeted test, full build, and full pnpm check passed; full pnpm test hit an unrelated failure in src/tts/status-config.test.ts.

Made with Cursor

Changed files

• ui/src/styles/components.css (modified, +16/-3)
• ui/src/ui/views/chat.test.ts (modified, +72/-0)
• ui/src/ui/views/exec-approval.ts (modified, +7/-5)
• ui/src/ui/views/gateway-url-confirmation.ts (modified, +5/-3)