Skip to content

feat(diff): add line wrap toggle#1250

Open
tyler-builds wants to merge 2 commits intopingdotgg:mainfrom
tyler-builds:add-diff-wrap-option
Open

feat(diff): add line wrap toggle#1250
tyler-builds wants to merge 2 commits intopingdotgg:mainfrom
tyler-builds:add-diff-wrap-option

Conversation

@tyler-builds
Copy link

@tyler-builds tyler-builds commented Mar 20, 2026

What Changed

Adds a new toggle button in the diff view header that toggle line wrapping in the diff. This is next to the split/unified toggle group and follows the same styling.

Why

When the diff panel width is small and the lines are long, the changes are out of view making review hard. This was especially bad when using split view.

UI Changes

Line wrapping off
diff-wrap-scroll

Line wrapping on
diff-wrap-wrapped

Checklist

  • This PR is small and focused
  • I explained what changed and why
  • I included before/after screenshots for any UI changes
  • I included a video for animation/interaction changes

Note

Add line wrap toggle to DiffPanel

Adds a toggle button to the DiffPanel header using WrapTextIcon that switches between scroll and wrap overflow modes. The selected mode is passed as an overflow option to each FileDiff, controlling whether long lines scroll horizontally or wrap.

Macroscope summarized 87fad1e.

@coderabbitai
Copy link

coderabbitai bot commented Mar 20, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 73712d09-b688-4a76-a6c9-6fd77574c7f0

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Tip

CodeRabbit can use TruffleHog to scan for secrets in your code with verification capabilities.

Add a TruffleHog config file (e.g. trufflehog-config.yml, trufflehog.yml) to your project to customize detectors and scanning behavior. The tool runs only when a config file is present.

@github-actions github-actions bot added size:S 10-29 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list. labels Mar 20, 2026
<Columns2Icon className="size-3" />
</Toggle>
</ToggleGroup>
<ToggleGroup
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: not a group with just one item. use Toggle without wrapper

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I’ve changed it to use Toggle directly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:S 10-29 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants