fix(ui): removed double padding on rendered content

[devr0306]

Summary

This pull request addresses a UI inconsistency where certain rendered content displayed double vertical padding. The change centralizes the control of vertical margins within the ShowMoreLines component, allowing parent components to pass desired spacing directly, thus ensuring a consistent and correct visual layout.

Details

• UI Padding Refactor: Refactored the handling of vertical padding for the 'Show More Lines' component to eliminate double padding issues in rendered content.
• Simplified Message Components: Removed redundant Box wrappers in GeminiMessage and GeminiMessageContent that were previously responsible for applying vertical margins, delegating this responsibility to the ShowMoreLines component itself.

Related Issues

Fixes #20861

How to Validate

Ask Gemini Write me some markdown code and a poem with several paragraphs about good clean code. There should only be single lines between paragraphs.

Pre-Merge Checklist

• Updated relevant documentation and README (if needed)
• Added/updated tests (if needed)
• Noted breaking changes (if any)
• Validated on required platforms/methods:
  • MacOS
    • npm run
    • npx
    • Docker
    • Podman
    • Seatbelt
  • Windows
    • npm run
    • npx
    • Docker
  • Linux
    • npm run
    • npx
    • Docker

[gemini-cli]

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!

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! 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 UI inconsistency where certain rendered content displayed double vertical padding. The change centralizes the control of vertical margins within the ShowMoreLines component, allowing parent components to pass desired spacing directly, thus ensuring a consistent and correct visual layout.

Highlights

• UI Padding Refactor: Refactored the handling of vertical padding for the 'Show More Lines' component to eliminate double padding issues in rendered content.
• ShowMoreLines Component Enhancement: The ShowMoreLines component now directly accepts marginTop and marginBottom props, allowing for more precise control over its vertical spacing.
• Simplified Message Components: Removed redundant Box wrappers in GeminiMessage and GeminiMessageContent that were previously responsible for applying vertical margins, delegating this responsibility to the ShowMoreLines component itself.

Changelog

• packages/cli/src/ui/components/ShowMoreLines.tsx
  • Added marginTop and marginBottom props to the ShowMoreLinesProps interface.
  • Updated the internal Box component to utilize the new marginTop and marginBottom props for dynamic spacing.
• packages/cli/src/ui/components/messages/GeminiMessage.tsx
  • Removed an extraneous Box wrapper that applied vertical margins around the ShowMoreLines component.
  • Passed the marginTop and marginBottom values directly to the ShowMoreLines component as new props.
• packages/cli/src/ui/components/messages/GeminiMessageContent.tsx
  • Eliminated a redundant Box wrapper that previously managed vertical margins for the ShowMoreLines component.
  • Configured the ShowMoreLines component to receive marginTop and marginBottom props directly from its parent.

Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request aims to fix a UI layout issue by refactoring how margins are applied. While the intention is good, the current implementation introduces a visual regression by removing a necessary margin in the standard display mode. My review includes suggestions to correct this regression, simplify the code by removing a redundant wrapper component, and improve maintainability by replacing magic numbers with named constants for layout values.

[github-actions]

Size Change: -310 B (0%)

Total Size: 26 MB

ℹ️ View Unchanged

Filename	Size	Change
./bundle/gemini.js	25.5 MB	-310 B (0%)
./bundle/node_modules/@google/gemini-cli-devtools/dist/client/main.js	221 kB	0 B
./bundle/node_modules/@google/gemini-cli-devtools/dist/src/_client-assets.js	227 kB	0 B
./bundle/node_modules/@google/gemini-cli-devtools/dist/src/index.js	11.5 kB	0 B
./bundle/node_modules/@google/gemini-cli-devtools/dist/src/types.js	132 B	0 B
./bundle/sandbox-macos-permissive-open.sb	890 B	0 B
./bundle/sandbox-macos-permissive-proxied.sb	1.31 kB	0 B
./bundle/sandbox-macos-restrictive-open.sb	3.36 kB	0 B
./bundle/sandbox-macos-restrictive-proxied.sb	3.56 kB	0 B
./bundle/sandbox-macos-strict-open.sb	4.82 kB	0 B
./bundle/sandbox-macos-strict-proxied.sb	5.02 kB	0 B

_{compressed-size-action}

[jacob314]

This change should have a snapshot based test that illustrates the bad behavior without the change and passes with the change. That ensures we will not accidentally regress this.

[jacob314]