z0x/blog.z0x.ca
Code Actions

fix: mobile dropdowns, katex overflow

Browse source
This commit is contained in:
enscribe 2024-09-13 19:35:10 -07:00
parent 0efd0d992d
commit 32fd23e2cf
No known key found for this signature in database
GPG key ID: 9BBD5C4114E25322
3 changed files with 6 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/ui/mobile-menu.tsx
View file

@ -40,7 +40,7 @@ const MobileMenu = () => {
<span className="sr-only">Toggle menu</span> <span className="sr-only">Toggle menu</span>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" className="mr-4 bg-background"> <DropdownMenuContent align="end" className="bg-background">
{NAV_LINKS.map((item) => ( {NAV_LINKS.map((item) => (
<DropdownMenuItem key={item.href} asChild> <DropdownMenuItem key={item.href} asChild>
<a <a

2
src/components/ui/mode-toggle.tsx
View file

@ -51,7 +51,7 @@ export function ModeToggle() {
<span className="sr-only">Toggle theme</span> <span className="sr-only">Toggle theme</span>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" className="mr-4 bg-background"> <DropdownMenuContent align="end" className="bg-background">
<DropdownMenuItem onClick={() => setThemeState('theme-light')}> <DropdownMenuItem onClick={() => setThemeState('theme-light')}>
<Sun className="mr-2 size-4" /> <Sun className="mr-2 size-4" />
<span>Light</span> <span>Light</span>

5
src/styles/global.css
View file

@ -48,7 +48,6 @@
html { html {
color-scheme: light; color-scheme: light;
scrollbar-gutter: stable both-edges;
@apply bg-background text-foreground; @apply bg-background text-foreground;
&.dark { &.dark {
@ -70,6 +69,10 @@
article { article {
@apply prose-headings:scroll-mt-20; @apply prose-headings:scroll-mt-20;
.katex-display {
@apply overflow-x-auto overflow-y-hidden py-4;
}
/* Removes background from <mark> elements */ /* Removes background from <mark> elements */
mark { mark {
@apply bg-transparent; @apply bg-transparent;