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;