fix(ui): ensure text wrap works in HunkDiff

[nshcr]

The Appearance -> Text wrap option in Global Settings doesn't seem to have any effect.
I found that the issue was caused by the white-space: pre style, which was preventing text from wrapping.

So I changed white-space to pre-wrap when wrapText is true. It should be working correctly now.

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
gitbutler-components	Ready	Preview	Comment	Aug 24, 2025 11:49am

[vercel]

@nshcr is attempting to deploy a commit to the GitButler Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull Request Overview

This PR enables text wrapping in the HunkDiff component by replacing the fixed white-space: pre with a dynamic pre-wrap when wrapText is enabled.

• Updated the inline style on the <td> to set a --pre-wrap CSS variable based on wrapText.
• Changed two hardcoded white-space: pre declarations to white-space: var(--pre-wrap).

Comments suppressed due to low confidence (2)

packages/ui/src/lib/hunkDiff/HunkDiffRow.svelte:213

• [nitpick] The CSS variable name --pre-wrap could be confusing since it doesn’t clearly indicate it maps to the white-space property. Consider renaming it to something like --whitespace-value or --white-space-setting.

		style="--tab-size: {tabSize}; --wrap: {wrapText ? 'wrap' : 'nowrap'}; --pre-wrap: {wrapText

packages/ui/src/lib/hunkDiff/HunkDiffRow.svelte:298

• We haven’t added any unit or visual tests to verify that wrapText actually causes wrapping. Consider adding a Jest/Playwright test or snapshot to cover this new behavior.

		white-space: var(--pre-wrap);

[Copilot]

The white-space: var(--pre-wrap) declaration is duplicated in two selectors. To improve maintainability, consider extracting it into a shared class or mixin to avoid repetition.

[Byron]

Thanks a lot for contributing!

Do you have before-after screenshots by any chance?

Besides that, someone with better Csskills will take a look soon :)!

[nshcr]

Kapture.2025-06-22.at.14.38.43.webm

@Byron Of course! I recorded a video showing the difference before and after applying this commit. The dev build was run based on the latest commit on master.

By the way, this issue likely exists in the v2 version of the component as well. Since I noticed that it has already been deprecated, I didn't make any changes there.
Let me know if I missed anything, I'd be happy to continue improving this PR!

[nshcr]

I just resolved the merge conflicts, and still waiting for review 🙂.

[Byron]

Thanks so much!

This PR has been in the queue for so long and was a fix for a real issue. And it appears I somehow dropped the ball on this, I am so sorry for that!

Let's have @PavelLaptev take a last look before merging.

[nshcr]

@Byron No worries!
I just saw someone bring this issue up on Discord channel and it reminded me of this PR, so I thought I'd give it a little bump.
I know there are plenty of bigger issues for the project to focus on, so that's totally fine, no rush at all!
And also thanks to GitButler, I can easily apply multiple unmerged PRs locally and build myself a nightly version, so it's not really blocking me.

[PavelLaptev]

@nshcr thanks for the PR! I made a few additions:

• Added a long code line to the diff preview in the appearance (like in your screenshot, it's helpful to see what changes)
• Removed unused CSS variable var(--wrap)
• Aligned numbers and the lock icon vertically to the top with the diff code instead of center, to better show where the line starts.

Before:

After:

Will merge it in a few hours.

[nshcr]

@PavelLaptev Thanks for your additional commit!
Following the principle of minimal changes, I didn't make any modifications beyond the key updates.
Your improvements make this PR much more complete, and I really appreciate them!

[PavelLaptev]

Following the principle of minimal changes, I didn't make any modifications beyond the key updates.

All good — that's a nice fix, thank you!