chore(stage-layouts): switched the position of about and profile picker

packages/stage-layouts/src/components/Layouts/Header.vue

@@ -17,8 +17,8 @@ function handleNavigation() {
   <header mb-1 w-full flex items-center justify-between gap-2>
     <HeaderLink />
     <div flex items-center gap-2>
-      <ProfileSwitcherPopover @manage="handleNavigation" />
       <ActionAbout />
+      <ProfileSwitcherPopover @manage="handleNavigation" />
       <HeaderAvatar />
     </div>
   </header>

packages/stage-layouts/src/components/Layouts/HeaderAvatar.vue

@@ -91,11 +91,11 @@ async function handleListSessions() {
         <img
           v-if="userAvatar"
           :src="userAvatar"
-          class="h-8 w-8 rounded-full object-cover ring-2 ring-white dark:ring-neutral-900"
+          class="h-7 w-7 rounded-full object-cover"
         >
         <div
           v-else
-          class="h-8 w-8 flex items-center justify-center rounded-full bg-neutral-200 text-neutral-500 ring-2 ring-white dark:bg-neutral-700 dark:text-neutral-400 dark:ring-neutral-900"
+          class="h-7 w-7 flex items-center justify-center rounded-full bg-neutral-200 text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400"
         >
           <div class="i-solar:user-bold-duotone text-lg" />
         </div>
@@ -109,7 +109,7 @@ async function handleListSessions() {
         />
       </button>
 
-      <transition
+      <Transition
         enter-active-class="transition duration-200 ease-out"
         enter-from-class="translate-y-1 opacity-0"
         enter-to-class="translate-y-0 opacity-100"
@@ -159,7 +159,7 @@ async function handleListSessions() {
             </button>
           </div>
         </div>
-      </transition>
+      </Transition>
     </div>
   </div>
 </template>

packages/stage-layouts/src/components/Layouts/InteractiveArea/Actions/About.vue

@@ -24,7 +24,18 @@ const edition = isStageTamagotchi()
 </script>
 
 <template>
-  <button border="2 solid neutral-100/60 dark:neutral-800/30" bg="neutral-50/70 dark:neutral-800/70" w-fit flex items-center self-end justify-center rounded-xl p-2 backdrop-blur-md title="About" @click="show = !show">
+  <button
+    title="About"
+    :class="[
+      'w-fit p-2',
+      'flex items-center justify-center',
+      'border-2 border-solid border-neutral-100/60 dark:border-neutral-800/30',
+      'bg-neutral-50/70 dark:bg-neutral-800/70',
+      'backdrop-blur-md',
+      'rounded-xl',
+    ]"
+    @click="show = !show"
+  >
     <div i-solar:info-circle-outline class="size-5" text="neutral-500 dark:neutral-400" />
   </button>
   <AboutDialog v-model="show">