fixed stuff overflowing in user popup e.g. in notifs

This commit is contained in:
RiedleroD 2024-07-03 18:30:51 +02:00 committed by RiedleroD
parent a74a631793
commit c39d9fa64b
3 changed files with 16 additions and 9 deletions

View file

@ -120,6 +120,7 @@ export default {
compactUserInfo () { compactUserInfo () {
return this.$store.getters.mergedConfig.compactUserInfo return this.$store.getters.mergedConfig.compactUserInfo
&& (this.$store.state.interface.layoutType !== 'mobile') && (this.$store.state.interface.layoutType !== 'mobile')
&& this.switcher
}, },
...mapGetters(['mergedConfig']) ...mapGetters(['mergedConfig'])
}, },

View file

@ -109,7 +109,8 @@
padding: 16px 0 6px; padding: 16px 0 6px;
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"pfp summary edit" "pfp name edit"
"pfp summary summary"
"stats stats stats"; "stats stats stats";
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
align-items: start; align-items: start;
@ -251,13 +252,15 @@
} }
.user-name { .user-name {
text-align: start;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
margin-right: 1em; margin-left: 0.6em;
font-size: 1.1em; font-size: 1.1em;
grid-area: name; grid-area: name;
white-space: nowrap; white-space: nowrap;
max-width: 100%; max-width: 100%;
z-index: 1; // so shadow from user avatar doesn't overlap it
} }
.user-meta { .user-meta {
@ -325,7 +328,9 @@
&.-compact { &.-compact {
.container { .container {
grid-template-areas: "pfp summary stats edit"; grid-template-areas:
"pfp name stats edit"
"pfp summary stats edit";
grid-template-columns: auto auto 1fr auto; grid-template-columns: auto auto 1fr auto;
} }
.user-counts { .user-counts {

View file

@ -32,6 +32,7 @@
</a> </a>
<router-link <router-link
v-else v-else
class="user-info-avatar-link"
:to="userProfileLink(user)" :to="userProfileLink(user)"
> >
<UserAvatar <UserAvatar
@ -39,13 +40,13 @@
:user="user" :user="user"
/> />
</router-link> </router-link>
<div class="user-summary">
<RichContent <RichContent
:title="user.name" :title="user.name"
class="user-name" class="user-name"
:html="user.name" :html="user.name"
:emoji="user.emoji" :emoji="user.emoji"
/> />
<div class="user-summary">
<router-link <router-link
class="user-screen-name" class="user-screen-name"
:title="user.screen_name_ui" :title="user.screen_name_ui"