fix(cli): prevent settings dialog border clipping using maxHeight#26507
fix(cli): prevent settings dialog border clipping using maxHeight#26507
Conversation
The settings dialog's bottom border was being clipped because height="100%" forced the dialog to expand beyond its calculated available height, pushing siblings (like the exit warning) into the overflow.
This change:
1. Replaces height="100%" with maxHeight={availableHeight} in BaseSettingsDialog.
2. Adds a regression test case in SettingsDialog.test.tsx to verify border integrity under height constraints.
3. Updates snapshots to include the new test case.
The use of maxHeight ensures the dialog fits within terminal bounds while also allowing it to shrink-to-fit shorter content lists, avoiding unnecessary whitespace.
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request addresses a visual regression where the bottom border of the settings dialog was being clipped in terminal environments with limited vertical space. By switching from a fixed height to a maximum height constraint, the dialog now correctly adapts to the available terminal height, ensuring all UI elements remain visible. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize the Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counterproductive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
|
Size Change: +8 B (0%) Total Size: 34 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Code Review
This pull request replaces the fixed height in BaseSettingsDialog with a maxHeight constraint and adds a test case with snapshots to verify border rendering in height-constrained environments. Feedback indicates that removing the default height could cause overflows when the height prop is missing, recommending a conditional fallback and explanatory comments for the layout logic.
|
/patch preview |
|
🚀 [Step 1/4] Patch workflow(s) waiting for approval! 📋 Details:
⏳ Status: The patch creation workflow has been triggered and is waiting for deployment approval. Please visit the specific workflow links below and approve the runs. 🔗 Track Progress: |
|
🚀 [Step 2/4] Patch PR Created! 📋 Patch Details:
📝 Next Steps:
🔗 Track Progress: |
|
🚀 [Step 3/4] Patch Release Waiting for Approval! 📋 Release Details:
⏳ Status: The patch release has been triggered and is waiting for deployment approval. Please visit the specific workflow run link below and approve the deployment. You'll receive another update when it completes. 🔗 Track Progress: |
|
✅ [Step 4/4] Patch Release Complete! 📦 Release Details:
🎉 Status: Your patch has been successfully released and published to npm! 📝 What's Available:
🔗 Links: |
Summary
This PR fixes a UI bug where the bottom border of the
/settingsdialog was being clipped off the screen, especially in smaller terminal windows.Details
The root cause was the use of
height="100%"on the outerBoxof theBaseSettingsDialog. In Ink's flex layout, this forced the dialog to expand beyond its calculated available space, pushing bottom border into the overflow.Changes:
height="100%"withmaxHeight={availableHeight}inBaseSettingsDialog.tsx.SettingsDialog.test.tsxthat verifies border integrity under strict height constraints.Related Issues
Fixes a visual regression where the bottom border of the settings box was missing.
How to Validate
npm run start/settingsnpm test -w @google/gemini-cli -- src/ui/components/SettingsDialog.test.tsxPre-Merge Checklist