fix(ui): fix flickering on small terminal heights#21416
Conversation
|
Hi @devr0306, thank you so much for your contribution to Gemini CLI! We really appreciate the time and effort you've put into this. We're making some updates to our contribution process to improve how we track and review changes. Please take a moment to review our recent discussion post: Improving Our Contribution Process & Introducing New Guidelines. Key Update: Starting January 26, 2026, the Gemini CLI project will require all pull requests to be associated with an existing issue. Any pull requests not linked to an issue by that date will be automatically closed. Thank you for your understanding and for being a part of our community! |
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 enhances the UI's ability to adapt to varying terminal heights by implementing a more precise and dynamic height calculation mechanism for displayed content, particularly for history items and shell outputs. The changes ensure that UI elements are appropriately constrained or allowed to expand based on the available vertical space and specific UI modes, leading to a more stable and responsive user experience. This includes refactoring the underlying utility functions and adding comprehensive tests to validate the new logic. Highlights
Changelog
Activity
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 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 counter productive. 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. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors and fixes bugs in the height calculation logic for UI components, particularly for tool and shell outputs. The changes replace hardcoded values with shared constants and introduce more accurate calculations that account for available terminal height, preventing UI overflow on smaller terminal sizes. A comprehensive suite of unit tests has been added to validate the new logic. The changes are well-implemented and significantly improve the robustness and correctness of the UI rendering. I have reviewed the changes and found no issues.
|
Size Change: +139 B (0%) Total Size: 26.2 MB
ℹ️ View Unchanged
|
gemini-cli
bot
added
the
priority/p1
devr0306
changed the title
gemini-cli
bot
added
the
🔒 maintainer only
jacob314
left a comment
jacob314
left a comment
There was a problem hiding this comment.
🤖 Automated Review from /review-frontend
Hi there! Thanks for putting this PR together.
Overall, this is a great improvement! The fix for the core layout flickering issue—specifically where an expandable shell was wrongly constrained to 40% of the screen height when constrainHeight was true—looks solid. Additionally, the logic to safely clamp contentHeight to 0 instead of 3 in the layout utils is correct and well-tested.
However, correctly fixing the minimum height uncovers a couple of critical bugs in the codebase when maxLines evaluates to 0. I'd like to request a few changes to address these edge cases before we merge, as they can cause severe performance issues or hangs on small terminal heights.
1. Critical Performance Bug in AnsiOutput.tsx
In packages/cli/src/ui/components/AnsiOutput.tsx, when maxLines is 0, numLinesRetained also becomes 0.
Because -0 === 0 in JavaScript, data.slice(-numLinesRetained) evaluates to data.slice(-0). Since slice(-0) is equivalent to slice(0), it returns the entire array instead of an empty array. This causes AnsiOutputText to render the full output (e.g., 10,000 lines) into Ink's layout engine when the terminal is very small, leading to severe performance issues or hanging.
Suggested Fix in packages/cli/src/ui/components/AnsiOutput.tsx:
- const lastLines = disableTruncation ? data : data.slice(-numLinesRetained);
+ const lastLines = disableTruncation
+ ? data
+ : numLinesRetained === 0
+ ? []
+ : data.slice(-numLinesRetained);2. Missing Truncation Label in ToolResultDisplay.tsx
In packages/cli/src/ui/components/messages/ToolResultDisplay.tsx, the truncation checks currently use if (maxLines). Since 0 is falsy, these conditions evaluate to false when maxLines is 0. This prevents hiddenLinesCount from being calculated, meaning MaxSizedBox will not display the "... X lines hidden (Ctrl+O to show) ..." label, even though the content is fully truncated.
Suggested Fix (in two places in packages/cli/src/ui/components/messages/ToolResultDisplay.tsx):
- if (maxLines) {
+ if (maxLines !== undefined) {and
- if (Array.isArray(resultDisplay) && !isAlternateBuffer && maxLines) {
+ if (Array.isArray(resultDisplay) && !isAlternateBuffer && maxLines !== undefined) {Conclusion
Status: Request Changes
Could you please apply these fixes? They are crucial to ensure the application doesn't hang or swallow truncation warnings when the terminal height forces a 0-line constraint.
Thanks again for the excellent work on the core layout fixes! Let me know if you have any questions.
| ? staticAreaMaxItemHeight | ||
| : undefined | ||
| : uiState.constrainHeight | ||
| ? availableTerminalHeight |
There was a problem hiding this comment.
why did we make this change? this is truncating items more than they should be. With this change we are now strangely truncating items that have isExpandable == true more than ones where it is false.
Co-authored-by: Jacob Richman <jacob314@gmail.com>
Co-authored-by: Jacob Richman <jacob314@gmail.com>
2 participants
Summary
This pull request enhances the UI's ability to adapt to varying terminal heights by implementing a more precise and dynamic height calculation mechanism for displayed content, particularly for history items and shell outputs. The changes ensure that UI elements are appropriately constrained or allowed to expand based on the available vertical space and specific UI modes, leading to a more stable and responsive user experience. This includes refactoring the underlying utility functions and adding comprehensive tests to validate the new logic.
Details
Related Issues
Fixes #20217
How to Validate
Ask Gemini "Run npm test -w @google/gemini-cli" and change the height of the terminal as the command is running to verify if it doesn't flicker on different terminal heights. The VS Code terminal might be best for testing this.
Pre-Merge Checklist