From e0bbe785c73921bf892d44813a3bb7939c19954e Mon Sep 17 00:00:00 2001
From: benluelo <git@luelo.dev>
Date: Thu, 25 Jan 2024 00:51:40 -0500
Subject: [PATCH] fix: fix some styling

---
 site/src/components/CodeSnippet.svelte | 10 +++-------
 site/src/pages/index.astro             |  5 +++--
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/site/src/components/CodeSnippet.svelte b/site/src/components/CodeSnippet.svelte
index 9a0a38c85c..dbd24d534c 100644
--- a/site/src/components/CodeSnippet.svelte
+++ b/site/src/components/CodeSnippet.svelte
@@ -16,17 +16,13 @@
   onMount(async () => (highlightedCode = await highlightCode(code)))
 </script>
 
-<div class="">
+<div class="code-snippet">
   {@html highlightedCode}
 </div>
 
 <style>
-  :global(.container > figure[data-rehype-pretty-code-figure] span[data-line]) {
-    overflow-x: scroll;
-    max-width: 100%;
-    width: 100%;
-    font-size: 0.75rem; /* 12px */
-    line-height: 1rem; /* 16px */
+  :global(.code-snippet > figure[data-rehype-pretty-code-figure] > pre) {
+    background-color: black !important;
   }
 
   @media (max-width: 400px) {
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index 9c4e1e7942..0b572f0c76 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -110,7 +110,7 @@ publishedBlogPosts.reverse()
               {
                 codeSnippets.map(snippet => (
                   <TabItem label={snippet.title}>
-                    <div class='px-1 w-full'>
+                    <div class='pl-1 w-full'>
                       <CodeSnippet
                         code={snippet.code}
                         client:load
@@ -122,7 +122,7 @@ publishedBlogPosts.reverse()
             </Tabs>
           </div>
           <div
-            class='antialiased bg-[#1f1f1f] hidden md:show md:h-px'
+            class='antialiased bg-[#1f1f1f] sm:hidden md:show md:h-px'
           >
           </div>
           <div class='flex flex-col gap-4 sm:p-8 p-4 sm:gap-8 items-center justify-center text-xl md:text-2xl font-normal text-gray-400 w-full sm:w-1/2 md:border-b-2'>
@@ -311,6 +311,7 @@ publishedBlogPosts.reverse()
   }
 
   a[role='tab'] {
+    border-bottom-width: 1px !important;
     border-color: transparent !important;
     padding-bottom: 5px !important;
     padding-top: 5px !important;