fix tab issues

src/app/components/Ui/UserMenu.vue

@@ -17,8 +17,10 @@
         class="z-10 w-44 divide-y divide-gray-100 rounded-lg bg-white text-gray-700 shadow dark:divide-neutral-800 dark:bg-neutral-700 dark:text-gray-200"
       >
         <DropdownMenuItem>
-          <div class="truncate">{{ authStore.userData?.name }}</div>
+          <div class="px-4 py-2">
-          <div class="truncate">@{{ authStore.userData?.username }}</div>
+            <div class="truncate">{{ authStore.userData?.name }}</div>
+            <div class="truncate">@{{ authStore.userData?.username }}</div>
+          </div>
         </DropdownMenuItem>
         <DropdownMenuItem>
           <NuxtLink

src/app/pages/admin.vue

@@ -15,6 +15,7 @@
               :to="`/admin/${item.id}`"
             >
               <BaseButton
+                as="span"
                 class="w-full cursor-pointer rounded p-2 font-medium transition-colors duration-200 hover:bg-red-800 dark:text-neutral-200"
               >
                 {{ item.name }}

src/app/pages/setup/1.vue

@@ -4,7 +4,7 @@
       {{ $t('setup.welcomeDesc') }}
     </p>
     <NuxtLink to="/setup/2">
-      <BaseButton>{{ $t('general.continue') }}</BaseButton>
+      <BaseButton as="span">{{ $t('general.continue') }}</BaseButton>
     </NuxtLink>
   </div>
 </template>

src/app/pages/setup/3.vue

@@ -5,10 +5,10 @@
     </p>
     <div class="mb-8 flex justify-center">
       <NuxtLink to="/setup/4">
-        <BaseButton>{{ $t('general.no') }}</BaseButton>
+        <BaseButton as="span">{{ $t('general.no') }}</BaseButton>
       </NuxtLink>
       <NuxtLink to="/setup/migrate">
-        <BaseButton>{{ $t('general.yes') }}</BaseButton>
+        <BaseButton as="span">{{ $t('general.yes') }}</BaseButton>
       </NuxtLink>
     </div>
   </div>

src/app/pages/setup/4.vue

@@ -8,18 +8,12 @@
         <FormNullTextField
           id="host"
           v-model="host"
-          type="text"
           :label="$t('general.host')"
           placeholder="vpn.example.com"
         />
       </div>
       <div class="flex flex-col">
-        <FormNumberField
+        <FormNumberField id="port" v-model="port" :label="$t('general.port')" />
-          id="port"
-          v-model="port"
-          type="number"
-          :label="$t('general.port')"
-        />
       </div>
       <div>
         <BaseButton @click="submit">{{ $t('general.continue') }}</BaseButton>

src/app/pages/setup/success.vue

@@ -2,7 +2,7 @@
   <div>
     <p>{{ $t('setup.successful') }}</p>
     <NuxtLink to="/login">
-      <BaseButton>{{ $t('login.signIn') }}</BaseButton>
+      <BaseButton as="span">{{ $t('login.signIn') }}</BaseButton>
     </NuxtLink>
   </div>
 </template>