adjust for mobile

src/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="items-center justify-center flex w-full h-full relative">
-    <div class="absolute top-2 right-4">
+    <div class="absolute top-8 right-8 sm:top-4 sm:right-4">
       <UiDropdownLocale @select="onSelectLocale" />
     </div>
 
@@ -16,11 +16,11 @@
       </span>
 
       <div class="flex flex-col md:flex-row gap-4 w-full h-24 md:h-auto">
-        <VaultButtonCreate />
+        <HaexVaultCreate />
 
-        <VaultButtonOpen
+        <HaexVaultOpen
           v-model:open="passwordPromptOpen"
-          :path="vaultPath"
+          :path="selectedVault?.path"
         />
       </div>
 
@@ -37,7 +37,7 @@
         >
           <div
             v-for="vault in lastVaults"
-            :key="vault.path"
+            :key="vault.name"
             class="flex items-center justify-between group overflow-x-scroll"
           >
             <UButton
@@ -47,16 +47,13 @@
               @click="
                 () => {
                   passwordPromptOpen = true
-                  vaultPath = vault.path
+                  selectedVault = vault
                 }
               "
             >
-              <span class="block md:hidden">
+              <span class="block">
                 {{ vault.name }}
               </span>
-              <span class="hidden md:block">
-                {{ vault.path }}
-              </span>
             </UButton>
             <UButton
               color="error"
@@ -65,7 +62,7 @@
             >
               <Icon
                 name="mdi:trash-can-outline"
-                @click="removeVaultAsync(vault.path)"
+                @click="removeVaultAsync(vault.name)"
               />
             </UButton>
           </div>
@@ -90,19 +87,21 @@
 <script setup lang="ts">
 import { openUrl } from '@tauri-apps/plugin-opener'
 import type { Locale } from 'vue-i18n'
+
 definePageMeta({
   name: 'vaultOpen',
 })
+const { t, setLocale } = useI18n()
 
 const passwordPromptOpen = ref(false)
-const vaultPath = ref('')
-
-const { t, setLocale } = useI18n()
+const selectedVault = ref<IVaultInfo>()
 
 const { syncLastVaultsAsync, removeVaultAsync } = useLastVaultStore()
 const { lastVaults } = storeToRefs(useLastVaultStore())
 
-await syncLastVaultsAsync()
+onMounted(async () => {
+  await syncLastVaultsAsync()
+})
 
 const onSelectLocale = async (locale: Locale) => {
   await setLocale(locale)

src/pages/vault.vue

@@ -1,17 +1,22 @@
 <template>
-  <div class="h-full">
+  <UPage
+    :ui="{
+      root: ['h-full w-full bg-elevated'],
+      center: ['h-full w-full'],
+    }"
+  >
     <NuxtLayout name="app">
       <NuxtPage />
     </NuxtLayout>
 
     <div class="hidden">
       <UiDialogConfirm
+        v-model:open="showNewDeviceDialog"
         :confirm-label="t('newDevice.save')"
         :title="t('newDevice.title')"
+        confirm-icon="mdi:content-save-outline"
         @abort="showNewDeviceDialog = false"
         @confirm="onSetDeviceNameAsync"
-        confirm-icon="mdi:content-save-outline"
-        v-model:open="showNewDeviceDialog"
       >
         <template #body>
           <div class="flex flex-col gap-4">
@@ -29,7 +34,7 @@
         </template>
       </UiDialogConfirm>
     </div>
-  </div>
+  </UPage>
 </template>
 
 <script setup lang="ts">
@@ -76,6 +81,7 @@ const onSetDeviceNameAsync = async () => {
     showNewDeviceDialog.value = false
     add({ color: 'success', description: t('newDevice.success') })
   } catch (error) {
+    console.error(error)
     add({ color: 'error', description: t('newDevice.error') })
   }
 }

src/pages/vault/[vaultId]/index.vue

@@ -1,13 +1,12 @@
 <template>
-  <div class="text-base-content flex flex-col">
-    <div class="h-screen bg-amber-300">
-      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+  <UPage>
+    <div class="h-screen bg-amber-300 flex-1 flex-wrap">
+      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
     </div>
-    <div class="h-screen bg-teal-300">
-      abbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
-      availableThemes:{{ uiStore.availableThemes }}
+    <div class="h-screen bg-teal-300 flex-1">
+      abbbbbbbbbbbbbbbbbbbbb availableThemes:{{ uiStore.availableThemes }}
     </div>
-  </div>
+  </UPage>
 </template>
 
 <script setup lang="ts">

src/pages/vault/[vaultId]/passwords.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-1 p-2 relative h-full">
+  <div class="flex-1 p-2">
     <NuxtPage />
   </div>
 </template>

src/pages/vault/[vaultId]/passwords/[[groupId]]/create.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="">
     <HaexPassGroup
       v-model="group"
       mode="create"

src/pages/vault/[vaultId]/passwords/[[groupId]]/index.vue

@@ -1,21 +1,22 @@
 <template>
-  <div class="flex-1 h-full">
-    <div class="h-full flex flex-col">
+  <div class="flex flex-1">
+    <!-- <div class="h-screen bg-accented">aaa</div> -->
+    <div class="flex flex-col flex-1">
       <HaexPassGroupBreadcrumbs
         v-show="breadCrumbs.length"
         :items="breadCrumbs"
         class="px-2 sticky -top-2 z-10"
       />
-      <div class="flex-1 py-1 flex">
-        <HaexPassMobileMenu
-          ref="listRef"
-          v-model:selected-items="selectedItems"
-          :menu-items="groupItems"
-        />
-      </div>
+      <!-- <div class="flex-1 py-1 flex"> -->
+      <HaexPassMobileMenu
+        ref="listRef"
+        v-model:selected-items="selectedItems"
+        :menu-items="groupItems"
+      />
+      <!--  </div> -->
 
       <div
-        class="fixed bottom-4 flex justify-between transition-all w-full sm:items-center items-end px-8"
+        class="fixed bottom-16 flex justify-between transition-all w-full sm:items-center items-end px-8 z-40"
       >
         <div class="w-full" />
 
@@ -26,7 +27,7 @@
           <UButton
             icon="mdi:plus"
             :ui="{
-              base: 'rotate-45 ',
+              base: 'rotate-45 z-40',
               leadingIcon: [open ? 'rotate-0' : 'rotate-45', 'transition-all'],
             }"
             size="xl"