From a9447f85f925645d5b0aeba44733b24573b508eb Mon Sep 17 00:00:00 2001
From: Mark Skelton <mdskelton99@gmail.com>
Date: Mon, 12 Feb 2024 12:07:12 -0600
Subject: [PATCH] Fix mobile borders

---
 config/rehype-code-titles.mjs | 4 ++--
 tailwind.config.cjs           | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/config/rehype-code-titles.mjs b/config/rehype-code-titles.mjs
index 1c2b5df8..9a90bf4a 100644
--- a/config/rehype-code-titles.mjs
+++ b/config/rehype-code-titles.mjs
@@ -14,14 +14,14 @@ function createTitle(title) {
         "bg-white",
         "dark:bg-zinc-950",
         "border-t",
-        "border-x",
         "border-zinc-300",
         "dark:border-zinc-700",
         "text-zinc-800",
         "dark:text-zinc-300",
         "text-xs",
         "font-mono",
-        "rounded-t-lg",
+        "sm:border-x",
+        "sm:rounded-t-lg",
       ],
     },
     tagName: "div",
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index d5a5402c..f120004f 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -429,13 +429,15 @@ module.exports = {
               ...font("xs"),
               backgroundColor: "var(--tw-prose-pre-bg)",
               borderRadius: 0,
+              border: "solid var(--tw-prose-code-border)",
+              borderWidth: "1px 0 1px 0",
               display: "grid",
               fontWeight: "inherit",
               isolation: "isolate",
               overflowX: "auto",
               padding: theme("spacing.4"),
               "@screen sm": {
-                border: "1px solid var(--tw-prose-code-border)",
+                borderWidth: "1px",
               },
             },