From fe296cf74f9139dc73569374fa51e79a77e79253 Mon Sep 17 00:00:00 2001
From: zejzejzej3 <dev@matthewcali.com>
Date: Tue, 15 Jul 2025 21:27:07 -0400
Subject: [PATCH] feat: make codeblocks uniform size and syntax highlighting

---
 src/components/CodeBlock.astro |  7 +++----
 src/pages/index.astro          | 15 +++++++++------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/CodeBlock.astro b/src/components/CodeBlock.astro
index 2c1a23a..dfa0fe2 100644
--- a/src/components/CodeBlock.astro
+++ b/src/components/CodeBlock.astro
@@ -25,7 +25,7 @@ const {
 ---
 
 <div 
-  class="relative group"
+  class="relative group bg-slate-50 dark:bg-slate-900/50 rounded-lg border border-slate-200 dark:border-slate-600 overflow-x-auto"
   data-code={code}
 >
   <!-- Light theme for light mode, hidden in dark -->
@@ -36,8 +36,7 @@ const {
     inline={inline}
     theme={lightTheme}
     defaultColor={false}
-
-    class="text-sm block dark:hidden"
+    class="text-sm block dark:hidden !bg-transparent"
   />
 
   <!-- Dark theme for dark mode, hidden in light -->
@@ -48,6 +47,6 @@ const {
     inline={inline}
     theme={darkTheme}
     defaultColor={false}
-    class="hidden dark:block text-sm"
+    class="hidden dark:block text-sm !bg-transparent"
   />
 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ea4add5..0b20478 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -464,19 +464,20 @@ Lux     # For Neovim`;
             >
               1
             </div>
-            <div>
+            <div class="flex-1 min-w-0">
               <h3
                 class="text-xl font-semibold mb-2 text-slate-900 dark:text-white"
               >
                 Clone the Repository
               </h3>
-              <p class="text-slate-700 dark:text-slate-300 mb-3">
+              <p class="text-slate-700 dark:text-slate-300 mb-4">
                 Download LuxVim to your local machine:
               </p>
 
               <div
                 data-controller="copy_to_clipboard"
                 data-copy-to-clipboard-code-value={installCode}
+                class="w-full"
               >
                 <CodeBlock code={installCode} lang="bash" />
 
@@ -491,19 +492,20 @@ Lux     # For Neovim`;
             >
               2
             </div>
-            <div>
+            <div class="flex-1 min-w-0">
               <h3
                 class="text-xl font-semibold mb-2 text-slate-900 dark:text-white"
               >
                 Run Installation
               </h3>
-              <p class="text-slate-700 dark:text-slate-300 mb-3">
+              <p class="text-slate-700 dark:text-slate-300 mb-4">
                 The install script handles everything automatically:
               </p>
 
               <div
                 data-controller="copy_to_clipboard"
                 data-copy-to-clipboard-code-value={runInstallCode}
+                class="w-full"
               >
                 <CodeBlock code={runInstallCode} lang="bash" />
 
@@ -518,18 +520,19 @@ Lux     # For Neovim`;
             >
               3
             </div>
-            <div>
+            <div class="flex-1 min-w-0">
               <h3
                 class="text-xl font-semibold mb-2 text-slate-900 dark:text-white"
               >
                 Launch LuxVim
               </h3>
-              <p class="text-slate-700 dark:text-slate-300 mb-3">
+              <p class="text-slate-700 dark:text-slate-300 mb-4">
                 Start coding with your new setup:
               </p>
               <div
                 data-controller="copy_to_clipboard"
                 data-copy-to-clipboard-code-value={launchCode}
+                class="w-full"
               >
                 <CodeBlock code={launchCode} lang="bash" />