fix: improve profile avatar alignment and styling

- 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>
This commit is contained in:
Ben Weeks 2025-12-24 12:48:55 +00:00
parent a21b5289c1
commit 0d945d5bfd
2 changed files with 13 additions and 6 deletions

View file

@ -155,19 +155,16 @@
</div> </div>
<!-- Profile Section --> <!-- 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"> <div class="row">
<!-- Profile Image --> <!-- Profile Image -->
<div class="col-auto"> <div class="col-auto">
<q-avatar <q-avatar size="100px" color="dark" class="profile-avatar">
size="100px"
style="border: 4px solid white; background: white"
class="flex flex-center"
>
<img <img
v-if="merchantConfig && merchantConfig.picture" v-if="merchantConfig && merchantConfig.picture"
:src="merchantConfig.picture" :src="merchantConfig.picture"
@error="handleImageError" @error="handleImageError"
style="object-fit: cover"
/> />
<q-icon <q-icon
v-else v-else

View file

@ -424,6 +424,16 @@
margin-left: auto; margin-left: auto;
width: 100%; 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> </style>
<template id="nostr-keys-dialog" <template id="nostr-keys-dialog"