HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

prevent usernames from overflowing the reactions hover-list

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/frontend/src/components/MkReactionsViewer.details.vue
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>