From 28833ffa92e4aa458adfa4a1e5f66b7d8885d78b Mon Sep 17 00:00:00 2001
From: nicholas-codecov <nicholas.deschenes@sentry.io>
Date: Fri, 8 Nov 2024 09:52:17 -0400
Subject: [PATCH 1/3] update virtual diff renderer

---
 .../VirtualRenderers/VirtualDiffRenderer.tsx  | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/ui/VirtualRenderers/VirtualDiffRenderer.tsx b/src/ui/VirtualRenderers/VirtualDiffRenderer.tsx
index cb424cc3e7..9902a0e92c 100644
--- a/src/ui/VirtualRenderers/VirtualDiffRenderer.tsx
+++ b/src/ui/VirtualRenderers/VirtualDiffRenderer.tsx
@@ -34,8 +34,9 @@ import { useSyncScrollMargin } from './useSyncScrollMargin'
 import { useSyncTotalWidth } from './useSyncTotalWidth'
 import { useSyncWrapperWidth } from './useSyncWrapperWidth'
 
-import './VirtualFileRenderer.css'
+// prism theme is required to come before so it doesn't override our custom css
 import 'shared/utils/prism/prismTheme.css'
+import './VirtualFileRenderer.css'
 
 export interface LineData {
   headNumber: string | null
@@ -255,14 +256,6 @@ const CodeBody = ({
               className="absolute left-0 top-0 pl-[192px]"
             >
               <div className="grid">
-                <div className="z-[-1] col-start-1 row-start-1 ">
-                  <ColorBar
-                    isHighlighted={
-                      location.hash === headHash || location.hash === baseHash
-                    }
-                    coverage={lineData?.[item.index]?.headCoverage}
-                  />
-                </div>
                 <div
                   className="col-start-1 row-start-1 flex flex-1 justify-between"
                   style={{
@@ -283,6 +276,14 @@ const CodeBody = ({
                     />
                   ) : null}
                 </div>
+                <div className="z-[-1] col-start-1 row-start-1 ">
+                  <ColorBar
+                    isHighlighted={
+                      location.hash === headHash || location.hash === baseHash
+                    }
+                    coverage={lineData?.[item.index]?.headCoverage}
+                  />
+                </div>
               </div>
             </div>
           )

From 9085bfe8914cfa7331e98baf29fe54f8ba8e54cc Mon Sep 17 00:00:00 2001
From: nicholas-codecov <nicholas.deschenes@sentry.io>
Date: Fri, 8 Nov 2024 09:52:31 -0400
Subject: [PATCH 2/3] update virtual file renderer

---
 src/ui/VirtualRenderers/VirtualFileRenderer.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/ui/VirtualRenderers/VirtualFileRenderer.tsx b/src/ui/VirtualRenderers/VirtualFileRenderer.tsx
index 0740b5d113..6919550214 100644
--- a/src/ui/VirtualRenderers/VirtualFileRenderer.tsx
+++ b/src/ui/VirtualRenderers/VirtualFileRenderer.tsx
@@ -36,8 +36,9 @@ import { useSyncScrollMargin } from './useSyncScrollMargin'
 import { useSyncTotalWidth } from './useSyncTotalWidth'
 import { useSyncWrapperWidth } from './useSyncWrapperWidth'
 
-import './VirtualFileRenderer.css'
+// prism theme is required to come before so it doesn't override our custom css
 import 'shared/utils/prism/prismTheme.css'
+import './VirtualFileRenderer.css'
 
 interface CodeBodyProps {
   tokens: Token[][]
@@ -158,12 +159,6 @@ const CodeBody = ({
               className="absolute left-0 top-0 pl-[94px]"
             >
               <div className="grid">
-                <div className="z-[-1] col-start-1 row-start-1">
-                  <ColorBar
-                    isHighlighted={location.hash === `#L${lineNumber}`}
-                    coverage={coverage?.[lineNumber]}
-                  />
-                </div>
                 <div
                   className="col-start-1 row-start-1"
                   style={{
@@ -176,6 +171,12 @@ const CodeBody = ({
                     <span {...getTokenProps({ token, key })} key={key} />
                   ))}
                 </div>
+                <div className="z-[-1] col-start-1 row-start-1">
+                  <ColorBar
+                    isHighlighted={location.hash === `#L${lineNumber}`}
+                    coverage={coverage?.[lineNumber]}
+                  />
+                </div>
               </div>
             </div>
           )

From b05ca92780894070529ea38dd3cb537cbc4de99c Mon Sep 17 00:00:00 2001
From: nicholas-codecov <nicholas.deschenes@sentry.io>
Date: Fri, 8 Nov 2024 09:59:56 -0400
Subject: [PATCH 3/3] revert the ordering of elements

---
 src/ui/VirtualRenderers/VirtualDiffRenderer.tsx | 16 ++++++++--------
 src/ui/VirtualRenderers/VirtualFileRenderer.tsx | 12 ++++++------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/ui/VirtualRenderers/VirtualDiffRenderer.tsx b/src/ui/VirtualRenderers/VirtualDiffRenderer.tsx
index 9902a0e92c..763512d056 100644
--- a/src/ui/VirtualRenderers/VirtualDiffRenderer.tsx
+++ b/src/ui/VirtualRenderers/VirtualDiffRenderer.tsx
@@ -256,6 +256,14 @@ const CodeBody = ({
               className="absolute left-0 top-0 pl-[192px]"
             >
               <div className="grid">
+                <div className="z-[-1] col-start-1 row-start-1 ">
+                  <ColorBar
+                    isHighlighted={
+                      location.hash === headHash || location.hash === baseHash
+                    }
+                    coverage={lineData?.[item.index]?.headCoverage}
+                  />
+                </div>
                 <div
                   className="col-start-1 row-start-1 flex flex-1 justify-between"
                   style={{
@@ -276,14 +284,6 @@ const CodeBody = ({
                     />
                   ) : null}
                 </div>
-                <div className="z-[-1] col-start-1 row-start-1 ">
-                  <ColorBar
-                    isHighlighted={
-                      location.hash === headHash || location.hash === baseHash
-                    }
-                    coverage={lineData?.[item.index]?.headCoverage}
-                  />
-                </div>
               </div>
             </div>
           )
diff --git a/src/ui/VirtualRenderers/VirtualFileRenderer.tsx b/src/ui/VirtualRenderers/VirtualFileRenderer.tsx
index 6919550214..7d72c8e416 100644
--- a/src/ui/VirtualRenderers/VirtualFileRenderer.tsx
+++ b/src/ui/VirtualRenderers/VirtualFileRenderer.tsx
@@ -159,6 +159,12 @@ const CodeBody = ({
               className="absolute left-0 top-0 pl-[94px]"
             >
               <div className="grid">
+                <div className="z-[-1] col-start-1 row-start-1">
+                  <ColorBar
+                    isHighlighted={location.hash === `#L${lineNumber}`}
+                    coverage={coverage?.[lineNumber]}
+                  />
+                </div>
                 <div
                   className="col-start-1 row-start-1"
                   style={{
@@ -171,12 +177,6 @@ const CodeBody = ({
                     <span {...getTokenProps({ token, key })} key={key} />
                   ))}
                 </div>
-                <div className="z-[-1] col-start-1 row-start-1">
-                  <ColorBar
-                    isHighlighted={location.hash === `#L${lineNumber}`}
-                    coverage={coverage?.[lineNumber]}
-                  />
-                </div>
               </div>
             </div>
           )