update user dropdown

Author: zAlweNy26

auto-imports.d.ts

@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -327,6 +328,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

src/components/UserDropdown.vue

@@ -20,8 +20,9 @@ watchEffect(() => {
 		</button>
 		<ul tabindex="0" class="dropdown-content join join-vertical !right-0 z-10 mt-6 w-40 p-0 text-sm">
 			<li>
-				<button class="font-small btn join-item pointer-events-none w-full cursor-not-allowed flex-nowrap px-2 text-left opacity-100">
-					<span class="grow text-right"> <span class="opacity-60">Signed in as</span> {{ jwtPayload?.username }} </span>
+				<button class="font-small btn join-item grow flex-col gap-1 items-end pointer-events-none w-full cursor-not-allowed px-2 opacity-100">
+					<span class="opacity-60">Signed in as</span> 
+					<span>{{ jwtPayload?.username }}</span>
 				</button>
 			</li>
 			<li>
@@ -38,7 +39,7 @@ watchEffect(() => {
 			</li>
 			<li>
 				<button class="font-small btn join-item w-full flex-nowrap px-2 text-right" @click="logoutCurrentUser()">
-					<span class="grow text-right">Logout</span>
+					<span class="grow text-right">Log out</span>
 					<span class="rounded-lg p-1">
 						<button class="opacity-50" @click="logoutCurrentUser()">
 							<heroicons-arrow-right-on-rectangle class="size-5" />