From 8e9f8a28646bbcaed6b6d9fc0ebc77ad8990185c Mon Sep 17 00:00:00 2001
From: Gabriel Miranda <gabrielmfern@outlook.com>
Date: Thu, 31 Oct 2024 07:40:20 -0700
Subject: [PATCH] fix(code-block): Improper padding on the line numbers (#1741)

---
 .changeset/silly-knives-kiss.md        | 5 +++++
 packages/code-block/src/code-block.tsx | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/silly-knives-kiss.md

diff --git a/.changeset/silly-knives-kiss.md b/.changeset/silly-knives-kiss.md
new file mode 100644
index 0000000000..d1377e3b70
--- /dev/null
+++ 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
index 9e13dd97fc..ad99e8bafb 100644
--- 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