fix(cli): hide scrollbars when in alternate buffer copy mode

[werdnum]

Summary

In alternate buffer copy mode, we display scroll bars still. This defeats the purpose – the scroll bars leak into the copied content.

Details

Now hide scroll bars when copy mode is on.

Related Issues

Fixes #18344

How to Validate

Turn on alternate buffer

npm run start

do some stuff to create scroll bars

Enter copy mode

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-code-assist]

Summary of Changes

Hello @werdnum, 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 an issue where scrollbars would appear in the CLI's alternate buffer copy mode, leading to unwanted visual artifacts in copied text. The changes introduce a mechanism to conditionally hide these scrollbars and adjust the rendering of virtualized lists to maintain proper content display during copy operations, significantly improving the user experience for text selection and copying.

Highlights

• Scrollbar Hiding Logic: Implemented conditional logic in VirtualizedList to hide vertical scrollbars (overflowY: 'hidden') and remove right padding when copyModeEnabled is true. This prevents scrollbars from appearing in copied content.
• Simulated Scrolling in Copy Mode: When copyModeEnabled, the VirtualizedList now uses marginTop: -scrollTop on its content box to visually simulate scrolling without relying on native scrollbars, ensuring the correct content is displayed.
• Propagating Copy Mode State: The copyModeEnabled state from UIStateContext is now passed down through MainContent to ScrollableList and finally to VirtualizedList components, enabling the new scrollbar behavior.
• Layout Adjustments: The DefaultAppLayout's paddingBottom is now conditionally applied only when in alternate buffer mode and copyModeEnabled is false, preventing extra padding during copy operations.
• Comprehensive Testing: New test cases were added to MainContent.test.tsx and VirtualizedList.test.tsx to verify the correct propagation of copyModeEnabled and the visual behavior of the list when in copy mode.

Changelog

• packages/cli/src/ui/components/MainContent.test.tsx
  • Updated useUIState mock to be a vi.fn for better control over return values.
  • Expanded mocked useUIState return with copyModeEnabled: false and terminalWidth: 100.
  • Modified ScrollableList mock to accept and display the copyModeEnabled prop for testing purposes.
  • Imported useUIState and UIState type for mocking.
  • Added a new test case to confirm copyModeEnabled is correctly passed to ScrollableList when in alternate buffer mode.
• packages/cli/src/ui/components/MainContent.tsx
  • Passed the uiState.copyModeEnabled prop to the ScrollableList component.
• packages/cli/src/ui/components/snapshots/MainContent.test.tsx.snap
  • Updated snapshot to reflect the ScrollableList mock's new output including copyMode:false.
• packages/cli/src/ui/components/shared/ScrollableList.tsx
  • Added copyModeEnabled?: boolean to the ScrollableListProps interface.
  • Forwarded the copyModeEnabled prop from ScrollableList to its child VirtualizedList component.
• packages/cli/src/ui/components/shared/VirtualizedList.test.tsx
  • Added a new test case to verify VirtualizedList renders correctly when copyModeEnabled is true and the list is scrolled, ensuring visible items are correct without scrollbars.
• packages/cli/src/ui/components/shared/VirtualizedList.tsx
  • Added copyModeEnabled?: boolean to the VirtualizedListProps type.
  • Conditionally set overflowY to 'hidden' and scrollTop to 0 when copyModeEnabled is true to hide scrollbars.
  • Conditionally set paddingRight to 0 when copyModeEnabled is true to remove scrollbar space.
  • Implemented marginTop={props.copyModeEnabled ? -scrollTop : 0} on the inner content Box to simulate scrolling visually when scrollbars are hidden.
• packages/cli/src/ui/layouts/DefaultAppLayout.tsx
  • Adjusted paddingBottom logic to apply 1 only when isAlternateBuffer is true and uiState.copyModeEnabled is false, preventing unwanted padding during copy mode.

Activity

• The author marked the PR as having updated relevant documentation and README (if needed).
• The author marked the PR as having added/updated tests (if needed).
• The author marked the PR as having noted breaking changes (if any).
• The author validated the changes on Linux using npm run.

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 effectively addresses the issue of scrollbars being visible in alternate buffer copy mode. The approach of using a negative marginTop to simulate scrolling while hiding the actual scrollbar is a clever solution that maintains the benefits of virtualization. The changes are well-contained and propagated correctly through the component hierarchy. The addition of corresponding tests for MainContent and VirtualizedList ensures the new functionality is covered and doesn't introduce regressions. The code quality is high, and I don't see any critical or high-severity issues with this implementation.

[jacob314]

Approved once this comment is addressed.

[jacob314]

[jacob314]