fix(cli): make footer items equally spaced by jacob314 · Pull Request #21843 · google-gemini/gemini-cli

jacob314 · 2026-03-10T07:40:40Z

Summary

See SVG snapshot to verify that the spacing is nicely distributed in both modes.

gemini-cli · 2026-03-10T07:40:51Z

Hi @jacob314, 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!

github-actions · 2026-03-10T07:44:44Z

Size Change: +333 B (0%)

Total Size: 26.1 MB

ℹ️ View Unchanged

Filename	Size	Change
`./bundle/gemini.js`	25.7 MB	+333 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}

gemini-code-assist · 2026-03-10T07:50:38Z

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 focuses on refining the user interface of the CLI's footer component. The primary goal was to resolve an issue where footer items lacked consistent spacing. By introducing more granular control over flexbox properties and adjusting the rendering logic, the changes ensure that all footer elements are now evenly distributed and aligned, leading to a cleaner and more professional presentation.

Highlights

Improved Footer Spacing: The footer items in the CLI are now equally spaced, enhancing visual consistency and readability.
Flexbox Refinements: The FooterRowItem interface was extended with an alignItems property, and the footer rendering logic was updated to leverage flexGrow, flexShrink, minWidth, justifyContent, and alignItems for more dynamic and controlled spacing.
New Test Coverage: A new test case was added to FooterConfigDialog.test.tsx to ensure the footer preview correctly updates when the 'Show footer labels' option is toggled.

Changelog

packages/cli/src/ui/components/Footer.tsx
- Added alignItems property to the FooterRowItem interface.
- Modified the rendering of separator Box elements to include flexGrow, flexShrink, minWidth, justifyContent, and alignItems for dynamic spacing.
- Applied alignItems to individual FooterRow items.
- Removed columnGap from the main Box element, relying on the new flex properties for spacing.
- Adjusted flexGrow and alignItems logic for rowItems based on their position and visibility.
packages/cli/src/ui/components/FooterConfigDialog.test.tsx
- Added a new test case to verify the preview update when the "Show footer labels" option is toggled off.
packages/cli/src/ui/components/FooterConfigDialog.tsx
- Changed flexGrow from 1 to 0 for FooterRowItem in the dialog's preview rendering.
packages/cli/src/ui/components/snapshots/Footer.test.tsx.snap
- Updated existing UI snapshots to reflect the new footer item spacing.
packages/cli/src/ui/components/snapshots/FooterConfigDialog--FooterConfigDialog-highlights-the-active-item-in-the-preview.snap.svg
- Updated SVG snapshot to reflect changes in spacing.
packages/cli/src/ui/components/snapshots/FooterConfigDialog--FooterConfigDialog-renders-correctly-with-default-settings.snap.svg
- Updated SVG snapshot to reflect changes in spacing.
packages/cli/src/ui/components/snapshots/FooterConfigDialog--FooterConfigDialog-updates-the-preview-when-Show-footer-labels-is-toggled-off.snap.svg
- Added a new SVG snapshot for the "Show footer labels" toggled off state.
packages/cli/src/ui/components/snapshots/FooterConfigDialog.test.tsx.snap
- Updated existing UI snapshots and added a new one for the "Show footer labels" toggled off state.

Activity

No human activity has been recorded on this pull request yet.

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.

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 refactors the footer layout to ensure items are equally spaced by using flexible separators instead of a fixed columnGap. The implementation is sound and correctly achieves the desired visual effect, as verified by the updated snapshots. The change also includes a new test for the footer's appearance when labels are hidden. I have one suggestion on the new test to improve its long-term maintainability.

gemini-code-assist · 2026-03-10T07:52:26Z

packages/cli/src/ui/components/FooterConfigDialog.test.tsx

+    // Move to "Show footer labels" (which is the second to last item)
+    for (let i = 0; i < ALL_ITEMS.length; i++) {
+      act(() => {
+        stdin.write('\u001b[B'); // Down arrow
+      });


The use of the magic number 10 to navigate to the 'Show footer labels' item makes this test fragile. If the number of configurable footer items changes in the future, this test will break. To make the test more robust, please avoid hardcoding the number of navigation steps. You could, for example, determine the required number of steps dynamically based on the length of the items list.

References

Magic numbers, especially those used for layout or padding, should be replaced with named constants to improve readability and maintainability. This makes the intent clearer and simplifies future updates.

jacob314 requested a review from a team as a code owner March 10, 2026 07:40

jacob314 changed the title ~~Fix footer spacing.~~ fix(cli) make footer items equally spaced Mar 10, 2026

jacob314 changed the title ~~fix(cli) make footer items equally spaced~~ fix(cli): make footer items equally spaced Mar 10, 2026

Fix footer spacing.

99c49f1

jacob314 force-pushed the footer_spacing branch from e7d45c9 to 99c49f1 Compare March 10, 2026 07:52

jacob314 enabled auto-merge March 10, 2026 07:52

gemini-code-assist bot reviewed Mar 10, 2026

View reviewed changes

gemini-cli bot added area/core Issues related to User Interface, OS Support, Core Functionality 🔒 maintainer only ⛔ Do not contribute. Internal roadmap item. labels Mar 10, 2026

jackwotherspoon approved these changes Mar 10, 2026

View reviewed changes

jacob314 added this pull request to the merge queue Mar 10, 2026

Merged via the queue into main with commit 6ae6c81 Mar 10, 2026
27 checks passed

jacob314 deleted the footer_spacing branch March 10, 2026 08:22

gemini-code-assist bot mentioned this pull request Mar 11, 2026

Changelog for v0.34.0-preview.0 #21965

Merged

kunal-10-cloud pushed a commit to kunal-10-cloud/gemini-cli that referenced this pull request Mar 12, 2026

fix(cli): make footer items equally spaced (google-gemini#21843)

bd724d3

liamhelmer pushed a commit to badal-io/gemini-cli that referenced this pull request Mar 12, 2026

fix(cli): make footer items equally spaced (google-gemini#21843)

f7b6b11

DavidAPierce pushed a commit that referenced this pull request Mar 16, 2026

fix(cli): make footer items equally spaced (#21843)

af2955e

yashodipmore pushed a commit to yashodipmore/geemi-cli that referenced this pull request Mar 21, 2026

fix(cli): make footer items equally spaced (google-gemini#21843)

b479c6a

SUNDRAM07 pushed a commit to SUNDRAM07/gemini-cli that referenced this pull request Mar 30, 2026

fix(cli): make footer items equally spaced (google-gemini#21843)

a46be67

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(cli): make footer items equally spaced#21843

fix(cli): make footer items equally spaced#21843
jacob314 merged 1 commit intomainfrom
footer_spacing

jacob314 commented Mar 10, 2026 •

edited

Loading

Uh oh!

gemini-cli bot commented Mar 10, 2026

Uh oh!

github-actions bot commented Mar 10, 2026 •

edited

Loading

Uh oh!

gemini-code-assist bot commented Mar 10, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Mar 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

jacob314 commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

gemini-cli bot commented Mar 10, 2026

Uh oh!

github-actions bot commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot commented Mar 10, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jacob314 commented Mar 10, 2026 •

edited

Loading

github-actions bot commented Mar 10, 2026 •

edited

Loading