diff --git a/src/lib/components/SecondaryNav.svelte b/src/lib/components/SecondaryNav.svelte
index 88dcfb5d..66405ca5 100644
--- a/src/lib/components/SecondaryNav.svelte
+++ b/src/lib/components/SecondaryNav.svelte
@@ -4,15 +4,17 @@
 
   interface Props {
     class?: string
+    visible?: boolean
     children?: Snippet
   }
 
-  const {children, ...props}: Props = $props()
+  const {children, visible = false, ...props}: Props = $props()
 </script>
 
 <div
   class={cx(
-    "mt-sai mb-sai max-h-screen w-60 min-h-0 shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex",
+    "mt-sai mb-sai max-h-screen w-60 min-h-0 shrink-0 flex-col gap-1 bg-base-300 z-nav",
+    visible ? "flex" : "hidden md:flex",
     props.class,
   )}>
   {@render children?.()}
diff --git a/src/routes/spaces/[relay]/+page.svelte b/src/routes/spaces/[relay]/+page.svelte
index 201f1835..c5545a8c 100644
--- a/src/routes/spaces/[relay]/+page.svelte
+++ b/src/routes/spaces/[relay]/+page.svelte
@@ -8,7 +8,7 @@
   import SpaceMenu from "@app/components/SpaceMenu.svelte"
 
   const url = decodeRelay($page.params.relay!)
-  const md = parseInt(theme.screens.md, 10)
+  const md = parseFloat(theme.screens.md) * 16
 
   let width = $state(0)
 
@@ -25,7 +25,7 @@
   <div class="ml-sai mt-sai mb-sai relative z-nav w-14 shrink-0 bg-base-200 pt-2">
     <PrimaryNavSpaces />
   </div>
-  <SecondaryNav class="flex! w-auto! grow pb-16">
+  <SecondaryNav visible class="w-auto grow pb-16">
     <SpaceMenu {url} />
   </SecondaryNav>
 {/if}