fix(mobile-nav): defer modal open after close; respect safe-area inset

Author: Adebesin-Cell

app/components/Header/MobileBottomBar.client.vue

@@ -50,7 +50,7 @@ function handleThemeClick() {
 <template>
   <Teleport to="body">
     <div
-      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 transition-transform duration-200 ease-out motion-reduce:transition-none"
+      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 pb-[env(safe-area-inset-bottom)] transition-transform duration-200 ease-out motion-reduce:transition-none"
       :class="hidden ? 'translate-y-full' : 'translate-y-0'"
       :style="{ '--mobile-bar-height': '3.5rem' }"
     >

app/components/Header/MobileMenuSheet.client.vue

@@ -17,20 +17,21 @@ function handleOpenCommandPalette() {
   nextTick(() => openCommandPalette())
 }
 
+function showDialogAfterClose(selector: string) {
+  const modal = document.querySelector<HTMLDialogElement>(selector)
+  if (!modal) return
+  close()
+  nextTick(() => {
+    if (!modal.open) modal.showModal()
+  })
+}
+
 function handleShowConnector() {
-  const modal = document.querySelector<HTMLDialogElement>('#connector-modal')
-  if (modal) {
-    close()
-    modal.showModal()
-  }
+  showDialogAfterClose('#connector-modal')
 }
 
 function handleShowAuth() {
-  const modal = document.querySelector<HTMLDialogElement>('#auth-modal')
-  if (modal) {
-    close()
-    modal.showModal()
-  }
+  showDialogAfterClose('#auth-modal')
 }
 
 const route = useRoute()