update text diffrence

lifeparticle · Sep 28, 2023 · c4737e2 · c4737e2
1 parent fd46ca9
commit c4737e2
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 40 deletions.
diff --git a/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss b/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss
@@ -4,8 +4,4 @@
 		justify-content: center;
 		padding: var(--bt-size-20) 0;
 	}
-
-	&_output {
-		overflow: auto;
-	}
 }
diff --git a/ui/src/pages/Tools/Diffchecker/index.tsx b/ui/src/pages/Tools/Diffchecker/index.tsx
@@ -56,47 +56,45 @@ const Diffchecker: React.FC = () => {
 			<PageGrid>
 				{lineDifferences.length > 0 && (
 					<Card title="Original text output ">
-						<div className={style.diffchecker_output}>
-							<pre>
-								{lineDifferences
-									.filter((part) => !part.added)
-									.map((part, index) => (
-										<span
-											key={index}
-											style={{
-												backgroundColor: part.removed
-													? "salmon"
-													: "white",
-											}}
-										>
-											{part.value}
-										</span>
-									))}
-							</pre>
-						</div>
+						<pre>
+							{lineDifferences
+								.filter((part) => !part.added)
+								.map((part, index) => (
+									<span
+										key={index}
+										style={{
+											backgroundColor: part.removed
+												? "salmon"
+												: "white",
+											whiteSpace: "pre-wrap",
+										}}
+									>
+										{part.value}
+									</span>
+								))}
+						</pre>
 					</Card>
 				)}
 
 				{lineDifferences.length > 0 && (
 					<Card title="Change text output">
-						<div className={style.diffchecker_output}>
-							<pre lang={"js"}>
-								{lineDifferences
-									.filter((part) => !part.removed)
-									.map((part, index) => (
-										<span
-											key={index}
-											style={{
-												backgroundColor: part.added
-													? "lightgreen"
-													: "white",
-											}}
-										>
-											{part.value}
-										</span>
-									))}
-							</pre>
-						</div>
+						<pre>
+							{lineDifferences
+								.filter((part) => !part.removed)
+								.map((part, index) => (
+									<span
+										key={index}
+										style={{
+											backgroundColor: part.added
+												? "lightgreen"
+												: "white",
+											whiteSpace: "pre-wrap",
+										}}
+									>
+										{part.value}
+									</span>
+								))}
+						</pre>
 					</Card>
 				)}
 			</PageGrid>