diff --git a/packages/client/src/components/reactions-viewer.details.vue b/packages/client/src/components/reactions-viewer.details.vue index d80f9b9e8..ecf138969 100644 --- a/packages/client/src/components/reactions-viewer.details.vue +++ b/packages/client/src/components/reactions-viewer.details.vue @@ -6,21 +6,11 @@ <div class="name">{{ reaction.replace('@.', '') }}</div> </div> <div class="users"> - <template v-if="users.length <= 10"> - <b v-for="u in users" :key="u.id" style="margin-right: 12px;"> - <MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/> - <br/> - <MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/> - </b> - </template> - <template v-if="10 < users.length"> - <b v-for="u in users" :key="u.id" style="margin-right: 12px;"> - <MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/> - <br/> - <MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/> - </b> - <span slot="omitted">+{{ count - 10 }}</span> - </template> + <div class="user" v-for="u in users" :key="u.id"> + <MkAvatar class="avatar" :user="u"/> + <MkUserName class="name" :user="u" :nowrap="true"/> + </div> + <div v-if="users.length > 10" class="omitted">+{{ count - 10 }}</div> </div> </div> </MkTooltip> @@ -81,13 +71,31 @@ export default defineComponent({ } > .users { - display: flex; flex: 1; min-width: 0; font-size: 0.9em; border-left: solid 0.5px var(--divider); padding-left: 10px; margin-left: 10px; + margin-right: 14px; + text-align: left; + + > .user { + line-height: 24px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:not(:last-child) { + margin-bottom: 3px; + } + + > .avatar { + width: 24px; + height: 24px; + margin-right: 3px; + } + } } } </style> diff --git a/packages/client/src/components/renote.details.vue b/packages/client/src/components/renote.details.vue index 128d97d8d..ff9c4505a 100644 --- a/packages/client/src/components/renote.details.vue +++ b/packages/client/src/components/renote.details.vue @@ -1,11 +1,11 @@ <template> -<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="340"> - <div class="renoteTooltip"> - <b v-for="u in users" :key="u.id"> - <MkAvatar :user="u" style="width: 24px; height: 24px;"/><br/> - <MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/> - </b> - <span v-if="users.length < count" slot="omitted">+{{ count - users.length }}</span> +<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="250"> + <div class="beaffaef"> + <div class="user" v-for="u in users" :key="u.id"> + <MkAvatar class="avatar" :user="u"/> + <MkUserName class="name" :user="u" :nowrap="true"/> + </div> + <div v-if="users.length < count" class="omitted">+{{ count - users.length }}</div> </div> </MkTooltip> </template> @@ -36,11 +36,25 @@ export default defineComponent({ </script> <style lang="scss" scoped> -.renoteTooltip { - display: flex; - flex: 1; - min-width: 0; +.beaffaef { font-size: 0.9em; - gap: 12px; + text-align: left; + + > .user { + line-height: 24px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:not(:last-child) { + margin-bottom: 3px; + } + + > .avatar { + width: 24px; + height: 24px; + margin-right: 3px; + } + } } </style>