prevent usernames from overflowing the reactions hover-list

This commit is contained in:
Hazelnoot 2024-10-12 00:29:40 -04:00
parent f3e6b43ea4
commit a1375c8ab7
1 changed files with 8 additions and 1 deletions

View File

@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.users">
<div v-for="u in users" :key="u.id" :class="$style.user">
<MkAvatar :class="$style.avatar" :user="u"/>
<MkUserName :user="u" :nowrap="true"/>
<MkUserName :user="u" :nowrap="true" :class="$style.username"/>
</div>
<div v-if="count > 10" :class="$style.more">+{{ count - 10 }}</div>
</div>
@ -98,4 +98,11 @@ function getReactionName(reaction: string): string {
.more {
padding-top: 4px;
}
.username {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
</style>