Fix UI

frontend/src/components/UserInfoButton.vue

@@ -0,0 +1,27 @@
+<template>
+  <q-btn flat no-caps dense icon="account_circle" :label="userInfo.fullName">
+    <q-menu max-width="225px">
+      <div class="row no-wrap q-px-md q-pt-sm ">
+        <div class="column items-center justify-center">
+          <q-icon name="account_circle" color="grey" size="3em" />
+        </div>
+        <div class="column q-ml-sm overflow-hidden">
+          <div class="text-subtitle1 ellipsis full-width">{{ userInfo.fullName }}</div>
+          <div class="text-grey-7 ellipsis text-caption q-mb-sm full-width">{{ userInfo.email }}</div>
+        </div>
+      </div>
+      <div class="row q-pb-sm q-px-md">
+        <q-btn outline color="negative" icon="logout" label="Logout" @click="authStore.logout()" class="full-width"  size="sm" v-close-popup />
+      </div>
+    </q-menu>
+  </q-btn>
+</template>
+<script setup lang="ts">
+import { useAuthStore } from 'stores/useAuthStore';
+import { computed } from 'vue';
+
+const authStore = useAuthStore();
+
+const userInfo = computed(() => authStore.userInfo);
+
+</script>