merge: Prevent usernames from overflowing the reactions hover-list (resolves #737) (!682)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/682

Closes #737

Approved-by: Marie <github@yuugi.dev>
Approved-by: Tess K <me@thvxl.se>
This commit is contained in:
Hazelnoot 2024-10-12 21:46:04 +00:00
commit 3093707469

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>