From 0d945d5bfd17563c19ffe9c691f9c96e528f0552 Mon Sep 17 00:00:00 2001
From: Ben Weeks <ben.weeks@outlook.com>
Date: Wed, 24 Dec 2025 12:48:55 +0000
Subject: [PATCH] fix: improve profile avatar alignment and styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add left margin to inset avatar from banner edge
- Use dark background color for avatar
- Add object-fit: cover to prevent image stretching
- Add profile-avatar CSS class with border and shadow

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 templates/nostrmarket/components/merchant-tab.html |  9 +++------
 templates/nostrmarket/index.html                   | 10 ++++++++++
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/templates/nostrmarket/components/merchant-tab.html b/templates/nostrmarket/components/merchant-tab.html
index cbd41ed..75b2bda 100644
--- a/templates/nostrmarket/components/merchant-tab.html
+++ b/templates/nostrmarket/components/merchant-tab.html
@@ -155,19 +155,16 @@
         </div>
 
         <!-- Profile Section -->
-        <q-card-section class="q-pt-none" style="margin-top: -50px">
+        <q-card-section class="q-pt-none q-ml-md" style="margin-top: -50px">
           <div class="row">
             <!-- Profile Image -->
             <div class="col-auto">
-              <q-avatar
-                size="100px"
-                style="border: 4px solid white; background: white"
-                class="flex flex-center"
-              >
+              <q-avatar size="100px" color="dark" class="profile-avatar">
                 <img
                   v-if="merchantConfig && merchantConfig.picture"
                   :src="merchantConfig.picture"
                   @error="handleImageError"
+                  style="object-fit: cover"
                 />
                 <q-icon
                   v-else
diff --git a/templates/nostrmarket/index.html b/templates/nostrmarket/index.html
index 50b148f..69e7e2e 100644
--- a/templates/nostrmarket/index.html
+++ b/templates/nostrmarket/index.html
@@ -424,6 +424,16 @@
     margin-left: auto;
     width: 100%;
   }
+
+  .profile-avatar {
+    border: 3px solid var(--q-dark-page);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .profile-avatar .q-avatar__content {
+    overflow: hidden;
+    border-radius: 50%;
+  }
 </style>
 
 <template id="nostr-keys-dialog"