fix: Fix line numbers incorrectly wrapping inside `word-break: break-…

…word` parents
cloudscape-design · Feb 3, 2025 · 4b59bb3 · 4b59bb3
1 parent 1055d7b
commit 4b59bb3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git 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
@@ -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;