From 36b8f9d2d47481809b8bcc1df636fc9d0f906fd1 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sun, 31 Aug 2025 15:08:54 +0200
Subject: [PATCH] Improve profile card layout in sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Made profile card taller with min-height of 180px
- Stacked profile image above name and email vertically
- Centered profile content for better visual balance
- Increased profile avatar size to 'large' for better visibility
- Moved menu button to absolute position in top-right corner
- Adjusted font sizes slightly for better readability
- Fixed text overflow with proper ellipsis

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

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

diff --git a/layouts/member.vue b/layouts/member.vue
index d0f3a32..206bc1f 100644
--- a/layouts/member.vue
+++ b/layouts/member.vue
@@ -65,20 +65,22 @@
         <div class="profile-footer">
           <v-divider class="mb-3" />
           <div class="profile-card-footer">
-            <div class="profile-avatar-wrapper">
-              <ProfileAvatar
-                v-if="memberData"
-                :member-id="memberData?.member_id"
-                :first-name="memberData?.first_name || user?.firstName"
-                :last-name="memberData?.last_name || user?.lastName"
-                size="default"
-                :show-badge="false"
-              />
-              <div class="online-indicator" />
-            </div>
-            <div class="profile-info">
-              <div class="profile-name">{{ fullName }}</div>
-              <div class="profile-email">{{ email }}</div>
+            <div class="profile-content">
+              <div class="profile-avatar-wrapper">
+                <ProfileAvatar
+                  v-if="memberData"
+                  :member-id="memberData?.member_id"
+                  :first-name="memberData?.first_name || user?.firstName"
+                  :last-name="memberData?.last_name || user?.lastName"
+                  size="large"
+                  :show-badge="false"
+                />
+                <div class="online-indicator" />
+              </div>
+              <div class="profile-info">
+                <div class="profile-name">{{ fullName }}</div>
+                <div class="profile-email">{{ email }}</div>
+              </div>
             </div>
             <v-menu offset-y>
               <template v-slot:activator="{ props }">
@@ -534,20 +536,21 @@ watch(width, (newWidth) => {
 }
 
 .profile-info {
-  flex: 1;
-  min-width: 0;
+  text-align: center;
+  width: 100%;
   
   .profile-name {
-    font-size: 0.875rem;
+    font-size: 0.925rem;
     font-weight: 600;
     color: rgb(31, 41, 55);
+    margin-bottom: 0.25rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   
   .profile-email {
-    font-size: 0.75rem;
+    font-size: 0.8rem;
     color: rgb(107, 114, 128);
     overflow: hidden;
     text-overflow: ellipsis;