fix(mobile-nav): keep bar above backdrop; tighten row spacing

Author: Adebesin-Cell

app/components/Header/MobileBottomBar.client.vue

@@ -22,7 +22,7 @@ function handleThemeClick() {
 <template>
   <Teleport to="body">
     <div
-      class="sm:hidden fixed inset-x-0 bottom-0 z-40 bg-bg border-t border-border flex items-center gap-2 px-3 h-14"
+      class="sm:hidden fixed inset-x-0 bottom-0 z-50 bg-bg border-t border-border flex items-center gap-2 px-3 h-14"
       :style="{ '--mobile-bar-height': '3.5rem' }"
     >
       <NuxtLink

app/components/Header/MobileMenuDocsView.vue

@@ -22,7 +22,7 @@ const docsLinks = [{ label: 'Docs home', href: NPMX_DOCS_SITE, external: true }]
           :href="link.href"
           target="_blank"
           rel="noopener noreferrer"
-          class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+          class="flex items-center gap-3 px-3 py-2 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
           @click="emit('close')"
         >
           <span class="i-lucide:file-text w-5 h-5 text-fg-muted" aria-hidden="true" />
@@ -39,7 +39,7 @@ const docsLinks = [{ label: 'Docs home', href: NPMX_DOCS_SITE, external: true }]
     <div class="border-t border-border p-3">
       <button
         type="button"
-        class="w-full flex items-center gap-2 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+        class="w-full flex items-center gap-2 px-3 py-2 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
         :aria-label="$t('nav.back_to_main_menu')"
         @click="emit('back')"
       >

app/components/Header/MobileMenuRootView.vue

@@ -28,7 +28,7 @@ const { user: atprotoUser } = useAtproto()
       <button
         v-if="isConnected && npmUser"
         type="button"
-        class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+        class="w-full flex items-center gap-3 px-3 py-2 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
         @click="emit('showConnector')"
       >
         <img
@@ -49,7 +49,7 @@ const { user: atprotoUser } = useAtproto()
       <button
         v-if="atprotoUser"
         type="button"
-        class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+        class="w-full flex items-center gap-3 px-3 py-2 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
         @click="emit('showAuth')"
       >
         <img
@@ -69,7 +69,7 @@ const { user: atprotoUser } = useAtproto()
       <button
         v-else
         type="button"
-        class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+        class="w-full flex items-center gap-3 px-3 py-2 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
         @click="emit('showAuth')"
       >
         <span class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center">
@@ -85,7 +85,7 @@ const { user: atprotoUser } = useAtproto()
         {{ $t('command_palette.title') }}
       </span>
       <ButtonBase
-        class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+        class="w-full flex items-center gap-3 px-3 py-2 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
         :aria-label="$t('shortcuts.command_palette')"
         @click="emit('openCommandPalette')"
       >
@@ -103,7 +103,7 @@ const { user: atprotoUser } = useAtproto()
     <div class="px-2 py-2">
       <button
         type="button"
-        class="w-full flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
+        class="w-full flex items-center gap-3 px-3 py-2 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200 text-start"
         :aria-label="$t('nav.docs_label')"
         @click="emit('enterDocs')"
       >
@@ -137,7 +137,7 @@ const { user: atprotoUser } = useAtproto()
             :to="link.to"
             :href="link.href"
             :target="link.target"
-            class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
+            class="flex items-center gap-3 px-3 py-2 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
             @click="emit('close')"
           >
             <span :class="link.iconClass" class="w-5 h-5 text-fg-muted" aria-hidden="true" />