openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(birthdays): anchor photo action buttons under avatar

Browse Source
This commit is contained in:
Rafael Foster
2026-04-29 07:11:34 -03:00
parent 3e0549524e
commit 36913faf8d
2 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/pages/birthdays.js
+11 -9
View File
@@ -276,9 +276,20 @@ function openBirthdayModal({ mode, birthday = null }) {
content: ` content: `
<div class="birthday-modal"> <div class="birthday-modal">
<div class="birthday-modal__identity"> <div class="birthday-modal__identity">
<div class="birthday-modal__photo-wrap">
<button type="button" class="birthday-avatar-editor" id="birthday-preview" aria-label="${t('birthdays.photoLabel')}"> <button type="button" class="birthday-avatar-editor" id="birthday-preview" aria-label="${t('birthdays.photoLabel')}">
${birthdayPreviewHtml(birthday?.name || '', photoData)} ${birthdayPreviewHtml(birthday?.name || '', photoData)}
</button> </button>
<input class="sr-only" id="bd-photo" type="file" accept="image/png,image/jpeg,image/webp,image/gif">
<div class="birthday-modal__photo-actions">
<button type="button" class="birthday-modal__photo-action" id="bd-photo-edit" aria-label="${t('birthdays.photoLabel')}" title="${t('birthdays.photoLabel')}">
<i data-lucide="pencil" aria-hidden="true"></i>
</button>
<button type="button" class="birthday-modal__photo-action birthday-modal__photo-action--danger" id="bd-remove-photo" aria-label="${t('birthdays.removePhoto')}" title="${t('birthdays.removePhoto')}">
<i data-lucide="trash-2" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="birthday-modal__fields"> <div class="birthday-modal__fields">
<div class="form-group"> <div class="form-group">
<label class="form-label" for="bd-name">${t('birthdays.nameLabel')}</label> <label class="form-label" for="bd-name">${t('birthdays.nameLabel')}</label>
@@ -290,15 +301,6 @@ function openBirthdayModal({ mode, birthday = null }) {
</div> </div>
</div> </div>
</div> </div>
<input class="sr-only" id="bd-photo" type="file" accept="image/png,image/jpeg,image/webp,image/gif">
<div class="birthday-modal__photo-actions">
<button type="button" class="birthday-modal__photo-action" id="bd-photo-edit" aria-label="${t('birthdays.photoLabel')}" title="${t('birthdays.photoLabel')}">
<i data-lucide="pencil" aria-hidden="true"></i>
</button>
<button type="button" class="birthday-modal__photo-action birthday-modal__photo-action--danger" id="bd-remove-photo" aria-label="${t('birthdays.removePhoto')}" title="${t('birthdays.removePhoto')}">
<i data-lucide="trash-2" aria-hidden="true"></i>
</button>
</div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="bd-notes">${t('birthdays.notesLabel')}</label> <label class="form-label" for="bd-notes">${t('birthdays.notesLabel')}</label>
<textarea class="form-input" id="bd-notes" rows="3" placeholder="${t('birthdays.notesPlaceholder')}">${esc(birthday?.notes || '')}</textarea> <textarea class="form-input" id="bd-notes" rows="3" placeholder="${t('birthdays.notesPlaceholder')}">${esc(birthday?.notes || '')}</textarea>
public/styles/birthdays.css
+8
View File
@@ -349,6 +349,14 @@
gap: var(--space-4); gap: var(--space-4);
} }
.birthday-modal__photo-wrap {
width: 84px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.birthday-modal__fields { .birthday-modal__fields {
flex: 1; flex: 1;
min-width: 0; min-width: 0;