From 4b59bb3919efc281de4a6b15566e78b15b9131da Mon Sep 17 00:00:00 2001
From: Avinash Dwarapu <dwaraa@amazon.com>
Date: Mon, 3 Feb 2025 10:04:32 +0100
Subject: [PATCH] fix: Fix line numbers incorrectly wrapping inside
 `word-break: break-word` parents

---
 pages/code-view/with-line-numbers.page.tsx | 7 +++++++
 src/code-view/styles.scss                  | 3 ++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/pages/code-view/with-line-numbers.page.tsx b/pages/code-view/with-line-numbers.page.tsx
index 30e4872..e2f8d72 100644
--- a/pages/code-view/with-line-numbers.page.tsx
+++ b/pages/code-view/with-line-numbers.page.tsx
@@ -17,6 +17,13 @@ export default function CodeViewPage() {
           content={`# Hello World`}
           actions={<Button ariaLabel="Copy code" iconName="copy"></Button>}
         />
+        {/* Wrapping should not be affected by the parent's word-break property. */}
+        <div style={{ wordBreak: "break-word" }}>
+          <CodeView
+            lineNumbers={true}
+            content={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => `This is line number #${i + 1}.`).join("\n")}
+          />
+        </div>
       </SpaceBetween>
     </ScreenshotArea>
   );
diff --git a/src/code-view/styles.scss b/src/code-view/styles.scss
index 3ebf78f..d3604b8 100644
--- a/src/code-view/styles.scss
+++ b/src/code-view/styles.scss
@@ -44,12 +44,13 @@ $color-background-code-view-dark: #282c34;
 }
 
 .line-number {
-  border-inline-end-color: cs.$color-border-divider-default;
   vertical-align: text-top;
+  white-space: nowrap;
   position: sticky;
   inset-inline-start: 0;
   border-inline-end-width: 1px;
   border-inline-end-style: solid;
+  border-inline-end-color: cs.$color-border-divider-default;
   padding-inline-start: cs.$space-static-xs;
   padding-inline-end: cs.$space-static-xs;