From e74f12eaa06f4884f95f03b4b6bad2460b36c4f5 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sun, 31 Aug 2025 15:16:15 +0200
Subject: [PATCH] Fix profile card avatar size and menu button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reduced avatar size from 'large' to 'small' for better proportions
- Made menu button extra small and moved it inside profile-content
- Positioned menu button absolutely in top-right of content area
- Reduced online indicator size to match smaller avatar
- Added subtle opacity to menu button (visible on hover)
- Improved overall visual balance of profile card

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 layouts/member.vue | 80 ++++++++++++++++++++++++++++++----------------
 1 file changed, 52 insertions(+), 28 deletions(-)

diff --git a/layouts/member.vue b/layouts/member.vue
index 206bc1f..9aa13f6 100644
--- a/layouts/member.vue
+++ b/layouts/member.vue
@@ -72,7 +72,7 @@
                   :member-id="memberData?.member_id"
                   :first-name="memberData?.first_name || user?.firstName"
                   :last-name="memberData?.last_name || user?.lastName"
-                  size="large"
+                  size="small"
                   :show-badge="false"
                 />
                 <div class="online-indicator" />
@@ -81,29 +81,30 @@
                 <div class="profile-name">{{ fullName }}</div>
                 <div class="profile-email">{{ email }}</div>
               </div>
+              <v-menu offset-y>
+                <template v-slot:activator="{ props }">
+                  <v-btn 
+                    icon="mdi-dots-vertical" 
+                    size="x-small" 
+                    variant="text" 
+                    v-bind="props"
+                    class="profile-menu-btn"
+                  />
+                </template>
+                <v-list class="glass-dropdown">
+                  <v-list-item 
+                    prepend-icon="mdi-cog" 
+                    title="Settings"
+                    to="/member/settings"
+                  />
+                  <v-list-item 
+                    prepend-icon="mdi-logout" 
+                    title="Logout"
+                    @click="handleLogout"
+                  />
+                </v-list>
+              </v-menu>
             </div>
-            <v-menu offset-y>
-              <template v-slot:activator="{ props }">
-                <v-btn 
-                  icon="mdi-dots-vertical" 
-                  size="small" 
-                  variant="text" 
-                  v-bind="props"
-                />
-              </template>
-              <v-list class="glass-dropdown">
-                <v-list-item 
-                  prepend-icon="mdi-cog" 
-                  title="Settings"
-                  to="/member/settings"
-                />
-                <v-list-item 
-                  prepend-icon="mdi-logout" 
-                  title="Logout"
-                  @click="handleLogout"
-                />
-              </v-list>
-            </v-menu>
           </div>
         </div>
       </template>
@@ -497,8 +498,9 @@ watch(width, (newWidth) => {
 
 .profile-card-footer {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
   padding: 1rem;
   background: linear-gradient(135deg,
     rgba(255, 255, 255, 0.9),
@@ -508,6 +510,7 @@ watch(width, (newWidth) => {
   margin: 0.5rem;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
+  position: relative;
   
   &:hover {
     background: linear-gradient(135deg,
@@ -516,6 +519,27 @@ watch(width, (newWidth) => {
     );
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
   }
+  
+  .profile-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    position: relative;
+    
+    .profile-menu-btn {
+      position: absolute;
+      top: -0.5rem;
+      right: -0.5rem;
+      opacity: 0.6;
+      transition: opacity 0.2s ease;
+      
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
 }
 
 .profile-avatar-wrapper {
@@ -524,10 +548,10 @@ watch(width, (newWidth) => {
   
   .online-indicator {
     position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 12px;
-    height: 12px;
+    bottom: -2px;
+    right: -2px;
+    width: 10px;
+    height: 10px;
     background: #22c55e;
     border: 2px solid white;
     border-radius: 50%;