From 32fd23e2cf9a9a890c1879b887cf6722a60afc81 Mon Sep 17 00:00:00 2001
From: enscribe <jason@enscribe.dev>
Date: Fri, 13 Sep 2024 19:35:10 -0700
Subject: [PATCH] fix: mobile dropdowns, katex overflow

---
 src/components/ui/mobile-menu.tsx | 2 +-
 src/components/ui/mode-toggle.tsx | 2 +-
 src/styles/global.css             | 5 ++++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/mobile-menu.tsx b/src/components/ui/mobile-menu.tsx
index 6e77c8b..f6cf65a 100644
--- a/src/components/ui/mobile-menu.tsx
+++ b/src/components/ui/mobile-menu.tsx
@@ -40,7 +40,7 @@ const MobileMenu = () => {
           <span className="sr-only">Toggle menu</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="mr-4 bg-background">
+      <DropdownMenuContent align="end" className="bg-background">
         {NAV_LINKS.map((item) => (
           <DropdownMenuItem key={item.href} asChild>
             <a
diff --git a/src/components/ui/mode-toggle.tsx b/src/components/ui/mode-toggle.tsx
index 652dfe2..d4dd966 100644
--- a/src/components/ui/mode-toggle.tsx
+++ b/src/components/ui/mode-toggle.tsx
@@ -51,7 +51,7 @@ export function ModeToggle() {
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="mr-4 bg-background">
+      <DropdownMenuContent align="end" className="bg-background">
         <DropdownMenuItem onClick={() => setThemeState('theme-light')}>
           <Sun className="mr-2 size-4" />
           <span>Light</span>
diff --git a/src/styles/global.css b/src/styles/global.css
index ab75f1e..390d77c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -48,7 +48,6 @@
 
   html {
     color-scheme: light;
-    scrollbar-gutter: stable both-edges;
     @apply bg-background text-foreground;
 
     &.dark {
@@ -70,6 +69,10 @@
   article {
     @apply prose-headings:scroll-mt-20;
 
+    .katex-display {
+      @apply overflow-x-auto overflow-y-hidden py-4;
+    }
+
     /* Removes background from <mark> elements */
     mark {
       @apply bg-transparent;