From 57d6fd68a7ec54ebb2fc652bdc0adeee9e214aba Mon Sep 17 00:00:00 2001
From: Charly Gomez <charly.gomez@sentry.io>
Date: Wed, 7 Aug 2024 14:37:56 +0200
Subject: [PATCH] fix: Add padding to diff code blocks (#10996)

---
 src/components/codeBlock/code-blocks.module.scss | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/codeBlock/code-blocks.module.scss b/src/components/codeBlock/code-blocks.module.scss
index 4cf169ac63be8..a245dbefce743 100644
--- a/src/components/codeBlock/code-blocks.module.scss
+++ b/src/components/codeBlock/code-blocks.module.scss
@@ -21,9 +21,15 @@
     margin: 0 0 1rem;
   }
 
+  /**
+  * Shift padding on code diffs, so the background highlight covers the whole line
+  */
   pre[class^='language-']:has(:global(.code-diff)) {
-    padding-left: 0;
     padding-right: 0;
+
+    & :global(.token.operator) {
+      padding-right: 12px;
+    }
   }
 
   pre[class^='language-']:has(:global(.highlight-line)) {
@@ -70,15 +76,22 @@
 
   /* Diff highlighting, classes provided by rehype-prism-plus */
   /* Set inserted line (+) color */
+  /* Move the margin left and adjust width so we can keep the parent padding  */
   :global(.diff-inserted),
   :global(.inserted) {
     background-color: rgba(16, 185, 129, 0.2);
+    margin-left: -12px;
+    width: calc(100% + 12px);
   }
 
+  /* Diff highlighting, classes provided by rehype-prism-plus */
   /* Set deleted line (-) color */
+  /* Move the margin left and adjust width so we can keep the parent padding  */
   :global(.diff-deleted),
   :global(.deleted) {
     background-color: rgba(239, 68, 68, 0.2);
+    margin-left: -12px;
+    width: calc(100% + 12px);
   }
 }