openclaw - 💡(How to fix) Fix Control UI: Long command outputs push approval buttons off screen [1 comments, 2 participants]

TL;DR

Implementing a combination of sticky approval buttons and collapsible command output is likely to fix the issue of inaccessible approve/deny buttons in the approval card.

Guidance

• Consider implementing sticky approval buttons to ensure they remain visible at the bottom of the approval card.
• Introduce a collapsible command output feature to display only the first few lines of output, with an option to expand and view the full output.
• Evaluate the effectiveness of capping the approval card height and making the output section scrollable as an alternative or complementary solution.
• Test the proposed fixes with various long commands to ensure the approve/deny buttons remain accessible in different scenarios.

Example

<!-- Example of collapsible command output -->
<div class="command-output">
  <div class="output-summary" style="height: 50px; overflow: hidden;">
    <!-- Display first 10 lines of output -->
  </div>
  <button class="show-more">Show more</button>
  <div class="output-full" style="display: none;">
    <!-- Display full output -->
  </div>
</div>

Notes

The best approach may depend on the specific requirements and constraints of the openclaw-control-ui webchat application. It's essential to test and refine the chosen solution to ensure a smooth user experience.

Recommendation

Apply a workaround by implementing a combination of sticky approval buttons and collapsible command output, as this approach addresses the issue of inaccessible buttons while providing a flexible and user-friendly solution.