fix: Fix line numbers incorrectly wrapping inside word-break: break-word parents

Author: avinashbot

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>
   );

src/code-view/styles.scss

@@ -44,12 +44,14 @@ $color-background-code-view-dark: #282c34;
 }
 
 .line-number {
-  border-inline-end-color: cs.$color-border-divider-default;
   vertical-align: text-top;
+  text-align: right;
+  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;