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

View file

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