New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: profile header avatar being pushed lower on smaller devices #2423
fix: profile header avatar being pushed lower on smaller devices #2423
Conversation
✅ Deploy Preview for elk-docs canceled.
|
✅ Deploy Preview for elk-zone ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
components/account/AccountHeader.vue
Outdated
@@ -115,7 +115,7 @@ const personalNoteMaxLength = 2000 | |||
<div p4 mt--18 flex flex-col gap-4> | |||
<div relative> | |||
<div flex justify-between> | |||
<button shrink-0 :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" p1 bg-base border-bg-base z-2 @click="previewAvatar"> | |||
<button shrink-0 class="h-full" :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" p1 bg-base border-bg-base z-2 @click="previewAvatar"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can directly be h-full
, no?
<button shrink-0 class="h-full" :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" p1 bg-base border-bg-base z-2 @click="previewAvatar"> | |
<button shrink-0 h-full :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" p1 bg-base border-bg-base z-2 @click="previewAvatar"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah I forgot that was possible in this project, you're totally right
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
adjusted it 😄
8890c73
to
4468dc0
Compare
this fixes an issue where on smaller devices the avatar was moved down, not aligning with the profile header anymore
an example of the issue can be seen here:
Fixed it looks like this:
to test the fix, you can take a look at any profile with header image and profile picture on a smaller screen ( when the profile buttons wrap around), the account I used is http://localhost:5314/bumscode.com/@tagesschau@ard.social on screen width 320px