diff options
| author | Acid Chicken (硫酸鶏) <root@acid-chicken.com> | 2023-04-14 16:00:41 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-04-14 16:00:41 +0900 |
| commit | c47a0f78ffa9c4b24514d95ecdb58cdb9a6c3936 (patch) | |
| tree | e765752eaf3a7c7caf3b25641d4956b18239a070 /packages/frontend/src | |
| parent | update CHANGELOG.md (diff) | |
| download | misskey-c47a0f78ffa9c4b24514d95ecdb58cdb9a6c3936.tar.gz misskey-c47a0f78ffa9c4b24514d95ecdb58cdb9a6c3936.tar.bz2 misskey-c47a0f78ffa9c4b24514d95ecdb58cdb9a6c3936.zip | |
fix(client): cat ears are clipped in MkReactionsViewer (#10445)
* fix: cat ears are clipped in MkReactionsViewer
* fix: missing padding
* fix border
---------
Co-authored-by: tamaina <tamaina@hotmail.co.jp>
Diffstat (limited to 'packages/frontend/src')
| -rw-r--r-- | packages/frontend/src/components/MkReactionsViewer.details.vue | 19 |
1 files changed, 10 insertions, 9 deletions
diff --git a/packages/frontend/src/components/MkReactionsViewer.details.vue b/packages/frontend/src/components/MkReactionsViewer.details.vue index b4210be911..f5e611c62a 100644 --- a/packages/frontend/src/components/MkReactionsViewer.details.vue +++ b/packages/frontend/src/components/MkReactionsViewer.details.vue @@ -10,7 +10,7 @@ <MkAvatar :class="$style.avatar" :user="u"/> <MkUserName :user="u" :nowrap="true"/> </div> - <div v-if="users.length > 10">+{{ count - 10 }}</div> + <div v-if="users.length > 10" :class="$style.more">+{{ count - 10 }}</div> </div> </div> </MkTooltip> @@ -50,7 +50,9 @@ function getReactionName(reaction: string): string { .reaction { max-width: 100px; + padding-right: 10px; text-align: center; + border-right: solid 0.5px var(--divider); } .reactionIcon { @@ -66,25 +68,20 @@ function getReactionName(reaction: string): string { } .users { + contain: content; flex: 1; min-width: 0; + margin: -4px 14px 0 10px; font-size: 0.95em; - border-left: solid 0.5px var(--divider); - padding-left: 10px; - margin-left: 10px; - margin-right: 14px; text-align: left; } .user { line-height: 24px; + padding-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - - &:not(:last-child) { - margin-bottom: 3px; - } } .avatar { @@ -92,4 +89,8 @@ function getReactionName(reaction: string): string { height: 24px; margin-right: 3px; } + +.more { + padding-top: 4px; +} </style> |