fix(ui): ensure text wrap works in HunkDiff (#9120)

* fix(ui): ensure text wrap works in HunkDiff

* Add a long line to test the feature

* remove redundant `text-wrap`

it didn't work

* rename "Text wrap" to "Soft wrap"

"Soft wrap" more clearly indicates that this is visual wrapping (lines appear wrapped on screen) vs "hard wrap" (actually inserting line breaks), which is particularly important in a diff context where the actual content shouldn't be modified.
Since this is specifically for diff/code viewing, "soft wrap" aligns better with developer expectations and terminology.

* align numbers in count columns to the top instead of center

---------

Co-authored-by: Pavel Laptev <[email protected]>

Author: nshcr

apps/desktop/src/components/projectSettings/AppearanceSettings.svelte

@@ -21,7 +21,7 @@
 			on:branchSelected={async (e) => {
 -				selectedBranch = e.detail;
 -				if ($platformName === 'win32') {
-+				if ($platformName === 'win64') {
++				if ($platformName === 'win64' && $userSettings.enableAdvancedFeatures && project.hasRemoteOrigin) {
 					setTarget();
 				}
 			}}`;
@@ -138,10 +138,10 @@
 
 	<SectionCard labelFor="wrapText" orientation="row" roundedTop={false} roundedBottom={false}>
 		{#snippet title()}
-			Text wrap
+			Soft wrap
 		{/snippet}
 		{#snippet caption()}
-			Wrap text in the diff view once it hits the end of the viewport.
+			Soft wrap long lines in the diff view to fit within the viewport.
 		{/snippet}
 
 		{#snippet actions()}

packages/ui/src/lib/components/InfoButton.svelte

@@ -10,6 +10,7 @@
 		title?: string;
 		size?: 'small' | 'medium';
 		maxWidth?: string;
+		iconTopOffset?: string;
 		icon?: keyof typeof iconsJson;
 		inheritColor?: boolean;
 		children: Snippet;
@@ -19,6 +20,7 @@
 		title,
 		size = 'medium',
 		maxWidth = '16rem',
+		iconTopOffset = '10%',
 		icon,
 		children,
 		inheritColor
@@ -67,6 +69,8 @@
 	role="tooltip"
 	onmouseenter={handleMouseEnter}
 	onmouseleave={handleMouseLeave}
+	style:--icon-top-offset={iconTopOffset}
+	style:--size={size === 'small' ? '12px' : '14px'}
 >
 	{#if icon}
 		<div class="info-custom-icon" class:inherit-color={inheritColor}>
@@ -104,12 +108,9 @@
 
 <style lang="postcss">
 	.wrapper {
-		--default-size: 14px;
-		--small-size: 12px;
-
 		display: inline-flex;
 		position: relative;
-		transform: translateY(10%);
+		transform: translateY(var(--icon-top-offset));
 	}
 
 	.info-custom-icon {
@@ -124,8 +125,9 @@
 
 	.info-button {
 		position: relative;
-		width: 50px;
-		border-radius: var(--default-size);
+		width: var(--size);
+		height: var(--size);
+		border-radius: var(--size);
 		box-shadow: inset 0 0 0 1.5px var(--clr-text-2);
 		color: var(--clr-text-2);
 		transition: box-shadow var(--transition-fast);
@@ -152,38 +154,28 @@
 	}
 
 	.wrapper.medium {
-		& .info-button {
-			width: var(--default-size);
-			height: var(--default-size);
-
-			&::before {
-				top: 3px;
-				width: 2px;
-				height: 2px;
-			}
-			&::after {
-				top: 6px;
-				width: 2px;
-				height: 5px;
-			}
+		& .info-button::before {
+			top: 3px;
+			width: 2px;
+			height: 2px;
+		}
+		& .info-button::after {
+			top: 6px;
+			width: 2px;
+			height: 5px;
 		}
 	}
 
 	.wrapper.small {
-		& .info-button {
-			width: var(--small-size);
-			height: var(--small-size);
-
-			&::before {
-				top: 3px;
-				width: 2px;
-				height: 2px;
-			}
-			&::after {
-				top: 6px;
-				width: 2px;
-				height: 3px;
-			}
+		& .info-button::before {
+			top: 3px;
+			width: 2px;
+			height: 2px;
+		}
+		& .info-button::after {
+			top: 6px;
+			width: 2px;
+			height: 3px;
 		}
 	}
 

packages/ui/src/lib/components/hunkDiff/HunkDiffRow.svelte

@@ -206,7 +206,13 @@
 				class:locked
 				class:staged
 			>
-				<InfoButton inheritColor size="small" icon="locked-extra-small" maxWidth="15rem">
+				<InfoButton
+					inheritColor
+					size="small"
+					icon="locked-extra-small"
+					maxWidth="15rem"
+					iconTopOffset="0"
+				>
 					{@render lockWarning(row.locks ?? [])}
 				</InfoButton>
 			</td>
@@ -226,7 +232,7 @@
 
 	<td
 		class="table__textContent"
-		style="--tab-size: {tabSize}; --wrap: {wrapText ? 'wrap' : 'nowrap'}"
+		style="--tab-size: {tabSize}; --pre-wrap: {wrapText ? 'pre-wrap' : 'pre'}"
 		class:readonly={true}
 		data-no-drag
 		class:diff-line-deletion={row.type === SectionType.RemovedLines}
@@ -308,8 +314,7 @@
 		padding-left: 4px;
 		font-size: 12px;
 		line-height: 1.25;
-		text-wrap: var(--wrap);
-		white-space: pre;
+		white-space: var(--pre-wrap);
 		cursor: text;
 		tab-size: var(--tab-size);
 		user-select: text;
@@ -318,8 +323,7 @@
 	.table__row-header {
 		position: relative;
 		min-height: 18px;
-		text-wrap: var(--wrap);
-		white-space: pre;
+		white-space: var(--pre-wrap);
 		cursor: text;
 	}
 
@@ -391,7 +395,9 @@
 		background-color: var(--clr-diff-count-bg);
 		color: var(--clr-diff-count-text);
 		font-size: 11px;
+		line-height: 1.5; /* Visually centered with 12px font size that diff lines have */
 		text-align: right;
+		vertical-align: top;
 		touch-action: none;
 		user-select: none;
 
@@ -451,6 +457,8 @@
 		border-right: 1px solid var(--clr-border-2);
 		background-color: var(--clr-diff-count-bg);
 		color: var(--clr-diff-count-text);
+		line-height: 1;
+		vertical-align: top;
 
 		&.diff-line-addition {
 			border-color: var(--clr-diff-addition-count-border);