claude-code - 💡(How to fix) Fix [BUG] Permission approval dialog truncated — Allow button not reachable on screen (Windows) [1 comments, 2 participants]

Error Messages/Logs

TL;DR

Implement a maximum height with internal scrolling for the tool approval dialog to ensure Allow/Deny buttons are always visible.

Guidance

• Review the CSS styling for the tool approval dialog to identify the element causing the excessive height and consider applying a max-height property with overflow-y: auto to enable scrolling.
• Verify that the dialog's content is properly wrapped in a container that can handle scrolling, such as a div with overflow-y: auto.
• Test the dialog with various prompt lengths to ensure the scrolling functionality works as expected and the Allow/Deny buttons remain visible.
• Consider adding a minimum height or padding to the dialog to prevent the buttons from being cut off in cases where the prompt is very short.

Example

.tool-approval-dialog {
  max-height: 500px; /* adjust this value based on your design requirements */
  overflow-y: auto;
}

Notes

The exact CSS class names and HTML structure are not provided in the issue, so the example above is a general illustration of how to apply a maximum height with scrolling.

Recommendation

Apply a workaround by modifying the CSS styling of the tool approval dialog to include a maximum height and internal scrolling, as this is a regression and the previous version worked as expected.