From efd675051a2195b7d3095dc8ecfa09e8c9cb13de Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Sat, 1 Apr 2023 10:39:19 -0700
Subject: [PATCH] fix(line-numbers): fixes to line numbers column (#271)

* Line numbers should not be covered by a solid fill, custom line background color

* Line numbers column should not be covered by code if scrollable
---
 src/LineNumbers.svelte        | 6 ++++++
 tests/SvelteHighlight.test.ts | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/LineNumbers.svelte b/src/LineNumbers.svelte
index 9b80e42e..cc804363 100644
--- a/src/LineNumbers.svelte
+++ b/src/LineNumbers.svelte
@@ -162,6 +162,10 @@
     padding-bottom: 1em;
   }
 
+  tr td:first-of-type {
+    z-index: 2;
+  }
+
   td {
     padding-left: var(--padding-left, 1em);
     padding-right: var(--padding-right, 1em);
@@ -182,10 +186,12 @@
   }
 
   td,
+  td > code,
   pre {
     position: relative;
   }
 
+  td > code,
   pre {
     z-index: 1;
   }
diff --git a/tests/SvelteHighlight.test.ts b/tests/SvelteHighlight.test.ts
index fda6dff7..e98faee2 100644
--- a/tests/SvelteHighlight.test.ts
+++ b/tests/SvelteHighlight.test.ts
@@ -61,7 +61,7 @@ describe("SvelteHighlight", () => {
 
     expect(target.querySelector("#line-numbers")?.innerHTML)
       .toMatchInlineSnapshot(`
-        "<div style=\\"overflow-x: auto;\\" class=\\"svelte-tjkhvl\\"><table class=\\"svelte-tjkhvl\\"><tbody class=\\"hljs\\"><tr class=\\"svelte-tjkhvl\\"><td class=\\"svelte-tjkhvl hljs\\" style=\\"position: sticky; left: 0px; text-align: right; user-select: none; width: 24px;\\"><code>1</code> </td> <td class=\\"svelte-tjkhvl\\"><pre class=\\"svelte-tjkhvl\\"><code>
+        "<div style=\\"overflow-x: auto;\\" class=\\"svelte-1vh31p0\\"><table class=\\"svelte-1vh31p0\\"><tbody class=\\"hljs\\"><tr class=\\"svelte-1vh31p0\\"><td class=\\"svelte-1vh31p0 hljs\\" style=\\"position: sticky; left: 0px; text-align: right; user-select: none; width: 24px;\\"><code class=\\"svelte-1vh31p0\\">1</code> </td> <td class=\\"svelte-1vh31p0\\"><pre class=\\"svelte-1vh31p0\\"><code>
         </code></pre> </td> </tr></tbody></table></div>"
       `);
   });