Issue Station
Sign In
Tools hereToolbox

openclaw - ✅(Solved) Fix [control-ui] Long command approval card buttons are off-screen on small mobile devices [3 pull requests, 1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
openclaw/openclaw#61425•Fetched 2026-04-08 02:58:49
View on GitHub
Comments
0
Participants
1
Timeline
8
Reactions
0
Author
lengxiaobingegelengxiaobingege
Participants
lengxiaobingegelengxiaobingege
Timeline (top)
cross-referenced ×3labeled ×2referenced ×2closed ×1

When executing long shell commands in the openclaw-control-ui (webchat), the approval card containing the full command text becomes excessively long. On small-screen mobile devices (~375-400px viewport), the Approve/Deny buttons are pushed below the visible viewport, making them inaccessible without scrolling.

Error Message

No error logs - this is a CSS/layout issue in the approval card component. Reproducible with any long shell command (e.g., 100+ line diagnostic script) on mobile browsers with ~390px viewport width.

Root Cause

When executing long shell commands in the openclaw-control-ui (webchat), the approval card containing the full command text becomes excessively long. On small-screen mobile devices (~375-400px viewport), the Approve/Deny buttons are pushed below the visible viewport, making them inaccessible without scrolling.

Fix Action

Fix / Workaround

The action buttons (Approve/Deny) are positioned below the long command text. On a Redmi K80 Pro (390px viewport), the buttons are completely off-screen. User must manually type /approve <ID> allow-once as a workaround.

  • Affected: Mobile users of openclaw-control-ui (webchat) on narrow viewports (~375-400px)
  • Severity: Medium - blocks workflow through UI but workaround exists via CLI /approve command
  • Frequency: Always reproducible with long commands
  • Consequence: Users on mobile cannot approve commands through UI; forced to use manual CLI workaround

PR fix notes

PR #61588: fix(control-ui): keep approval buttons visible on mobile

Description (problem / solution / changelog)

Summary

On small mobile viewports (~375-400px), long shell commands in the exec approval card push the Approve/Deny buttons below the visible area, making them inaccessible without scrolling. Users must resort to typing /approve <ID> allow-once manually.

Changes

ui/src/styles/components.css:

  • .exec-approval-card: Add display: flex; flex-direction: column; max-height: calc(100vh - 48px) so the card never exceeds the viewport
  • .exec-approval-command: Add overflow-y: auto; flex-shrink: 1; min-height: 0 so the command preview scrolls within its space while action buttons remain visible at the bottom

Before / After

Before: Long commands expand the card beyond the viewport, buttons are unreachable on mobile. After: Command preview becomes scrollable, buttons stay pinned at the bottom of the card.

Test Plan

  • Open control-ui on a ~375px viewport
  • Trigger a long shell command approval (100+ lines)
  • Verify buttons remain visible and accessible
  • Verify desktop layout is unaffected

Fixes #61425

🤖 Generated with Claude Code

Changed files

  • ui/src/styles/components.css (modified, +6/-0)

PR #61599: fix: approval card buttons off-screen on mobile

Description (problem / solution / changelog)

Summary

Fixes #61425

On small mobile viewports (~375-400px), long shell commands in the approval card push the Approve/Deny buttons below the visible area, making them inaccessible.

Changes

  • Card: Added max-height: 90dvh with display: flex; flex-direction: column so the card never exceeds the viewport
  • Command preview: Added max-height: 40dvh with overflow-y: auto so long commands scroll instead of expanding infinitely
  • Action buttons: flex-shrink: 0 ensures they always remain visible at the bottom
  • Meta section: flex-shrink: 0 to prevent squashing
  • Overlay: Changed to align-items: flex-start with mobile-safe padding (env(safe-area-inset-top)) and overflow-y: auto

Testing

  • Desktop: Card behaves identically for normal-length commands (max-height is not reached)
  • Mobile (~390px): Long commands are truncated with scroll; action buttons remain accessible at the bottom of the card

Changed files

PR #61873: fix: approval card buttons off-screen on mobile

Description (problem / solution / changelog)

Fixes #61425

Summary

On small mobile viewports (~375-400px), long shell commands in the approval card push the Approve/Deny buttons off-screen.

Changes

  • Card: max-height: 90dvh with flex column layout
  • Command preview: max-height: 40dvh with overflow-y auto
  • Buttons: flex-shrink: 0 to remain visible
  • Safe-area: top and bottom env() padding for notched devices

Changed files

  • ui/src/styles/components.css (modified, +7/-0)

Code Example

No error logs - this is a CSS/layout issue in the approval card component. Reproducible with any long shell command (e.g., 100+ line diagnostic script) on mobile browsers with ~390px viewport width.
RAW_BUFFERClick to expand / collapse

Bug type

Behavior bug (incorrect output/state without crash)

Beta release blocker

No

Summary

When executing long shell commands in the openclaw-control-ui (webchat), the approval card containing the full command text becomes excessively long. On small-screen mobile devices (~375-400px viewport), the Approve/Deny buttons are pushed below the visible viewport, making them inaccessible without scrolling.

Steps to reproduce

  1. Open OpenClaw webchat on a mobile device with a narrow viewport (~375-400px width)
  2. Trigger a long shell command execution (e.g., a 500+ line diagnostic script)
  3. The approval card appears with the full command text displayed
  4. Scroll to the bottom — the Approve/Deny action buttons are pushed below the visible area
  5. Buttons are unreachable or require awkward scrolling past the command preview

Expected behavior

Approve and Deny buttons should remain accessible within the viewport regardless of command length. The command preview should be scrollable or collapsible so action buttons stay visible on mobile.

Actual behavior

The action buttons (Approve/Deny) are positioned below the long command text. On a Redmi K80 Pro (390px viewport), the buttons are completely off-screen. User must manually type /approve <ID> allow-once as a workaround.

OpenClaw version

2026.4.2

Operating system

Ubuntu 24.04 LTS

Install method

npm global installer

Model

openrouter/qwen/qwen3.6-plus:free

Provider / routing chain

N/A (this is a control-ui frontend issue, not a model routing issue)

Additional provider/model setup details

No response

Logs, screenshots, and evidence

No error logs - this is a CSS/layout issue in the approval card component. Reproducible with any long shell command (e.g., 100+ line diagnostic script) on mobile browsers with ~390px viewport width.

Impact and severity

  • Affected: Mobile users of openclaw-control-ui (webchat) on narrow viewports (~375-400px)
  • Severity: Medium - blocks workflow through UI but workaround exists via CLI /approve command
  • Frequency: Always reproducible with long commands
  • Consequence: Users on mobile cannot approve commands through UI; forced to use manual CLI workaround

Additional information

This is a longstanding UX design issue in the approval card component. The card does not account for viewport constraints or command preview overflow on mobile devices. Suggested fixes: make action buttons sticky to bottom, add max-height with scrolling to command preview, or implement collapsible command text.

extent analysis

TL;DR

Make the action buttons sticky to the bottom of the viewport or add a max-height with scrolling to the command preview to ensure accessibility on mobile devices.

Guidance

  • Consider adding CSS to make the Approve/Deny buttons sticky to the bottom of the viewport, ensuring they remain accessible regardless of command length.
  • Implement a max-height with scrolling for the command preview, allowing users to view the full command without pushing the action buttons off-screen.
  • As an alternative, implement collapsible command text to reduce the overall height of the approval card and keep the action buttons visible.
  • Test these changes on various mobile devices with different viewport widths to ensure the fix is effective across different screen sizes.

Example

/* Example of making action buttons sticky to the bottom */
.approval-card .action-buttons {
  position: sticky;
  bottom: 0;
}

/* Example of adding max-height with scrolling to command preview */
.approval-card .command-preview {
  max-height: 200px;
  overflow-y: auto;
}

Notes

The provided suggestions are based on the assumption that the issue is primarily related to CSS and layout. Further testing and verification are necessary to ensure the chosen solution works as expected across different devices and browsers.

Recommendation

Apply a workaround by making the action buttons sticky to the bottom of the viewport or adding a max-height with scrolling to the command preview, as this is a UX design issue that can be addressed through CSS changes.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

FAQ

Expected behavior

Approve and Deny buttons should remain accessible within the viewport regardless of command length. The command preview should be scrollable or collapsible so action buttons stay visible on mobile.

#training loop#device allocation#model download#tokenizer error#prompt formatting

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING