fix: Diff strings considering spaces (#6271)

kyle-ssg · web-flow · commit 8efb10862ee2 · 2025-11-11T15:58:28.000Z
diff --git a/frontend/web/components/diff/DiffString.tsx b/frontend/web/components/diff/DiffString.tsx
@@ -19,7 +19,7 @@ const sanitiseDiffString = (value: FlagsmithValue) => {
   return `${value}`
 }
 const DiffString: FC<DiffType> = ({
-  compareMethod = DiffMethod.WORDS,
+  compareMethod = DiffMethod.WORDS_WITH_SPACE,
   newValue,
   oldValue,
 }) => {
diff --git a/frontend/web/components/diff/DiffVariations.tsx b/frontend/web/components/diff/DiffVariations.tsx
@@ -46,7 +46,7 @@ const DiffVariations: FC<DiffVariationsType> = ({ diffs, projectFlag }) => {
             >
               <DiffString
                 data-test={`version-variation-${i}-weight`}
-                compareMethod={DiffMethod.WORDS}
+                compareMethod={DiffMethod.WORDS_WITH_SPACE}
                 oldValue={`${diff.oldWeight || 0}%`}
                 newValue={`${diff.newWeight || 0}%`}
               />
diff --git a/frontend/web/styles/3rdParty/_react-diff.scss b/frontend/web/styles/3rdParty/_react-diff.scss
@@ -73,10 +73,10 @@
   background-color: $success-alfa-16 !important;
 }
 .react-diff-hf3w1f-word-removed {
-  background-color: $danger-alfa-8 !important;
+  background-color: $danger-alfa-16 !important;
 }
 .react-diff-1u4zuq6-word-added {
-  background-color: $success-alfa-8 !important;
+  background-color: $success-alfa-16 !important;
 }
 .react-diff-1n5o7vh-diff-container pre {
   font-family: $font-family-monospace;

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ const sanitiseDiffString = (value: FlagsmithValue) => {`
`19`	`19`	return `${value}`
`20`	`20`	`}`
`21`	`21`	`const DiffString: FC<DiffType> = ({`
`22`		`- compareMethod = DiffMethod.WORDS,`
	`22`	`+ compareMethod = DiffMethod.WORDS_WITH_SPACE,`
`23`	`23`	`newValue,`
`24`	`24`	`oldValue,`
`25`	`25`	`}) => {`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ const DiffVariations: FC<DiffVariationsType> = ({ diffs, projectFlag }) => {`
`46`	`46`	`>`
`47`	`47`	`<DiffString`
`48`	`48`	data-test={`version-variation-${i}-weight`}
`49`		`- compareMethod={DiffMethod.WORDS}`
	`49`	`+ compareMethod={DiffMethod.WORDS_WITH_SPACE}`
`50`	`50`	oldValue={`${diff.oldWeight \|\| 0}%`}
`51`	`51`	newValue={`${diff.newWeight \|\| 0}%`}
`52`	`52`	`/>`
Original file line number	Diff line number	Diff line change
`@@ -73,10 +73,10 @@`
`73`	`73`	`background-color: $success-alfa-16 !important;`
`74`	`74`	`}`
`75`	`75`	`.react-diff-hf3w1f-word-removed {`
`76`		`- background-color: $danger-alfa-8 !important;`
	`76`	`+ background-color: $danger-alfa-16 !important;`
`77`	`77`	`}`
`78`	`78`	`.react-diff-1u4zuq6-word-added {`
`79`		`- background-color: $success-alfa-8 !important;`
	`79`	`+ background-color: $success-alfa-16 !important;`
`80`	`80`	`}`
`81`	`81`	`.react-diff-1n5o7vh-diff-container pre {`
`82`	`82`	`font-family: $font-family-monospace;`