fix(code-block): Improper padding on the line numbers (#1741)

resend · Oct 31, 2024 · 8e9f8a2 · 8e9f8a2
1 parent e718f53
commit 8e9f8a2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/silly-knives-kiss.md b/.changeset/silly-knives-kiss.md
@@ -0,0 +1,5 @@
+---
+"@react-email/code-block": patch
+---
+
+fix improper padding on the line numbers
diff --git a/packages/code-block/src/code-block.tsx b/packages/code-block/src/code-block.tsx
@@ -95,13 +95,13 @@ export const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>(
         <code>
           {tokensPerLine.map((tokensForLine, lineIndex) => (
             <p key={lineIndex} style={{ margin: 0, minHeight: "1em" }}>
-              {Boolean(props.lineNumbers) && (
+              {props.lineNumbers ? (
                 <span
-                  style={{ paddingRight: 30, fontFamily: props.fontFamily }}
+                  style={{ maxWidth: "1.875em", fontFamily: props.fontFamily }}
                 >
                   {lineIndex + 1}
                 </span>
-              )}
+              ) : null}
 
               {tokensForLine.map((token, i) => (
                 <CodeBlockLine