From c47a0f78ffa9c4b24514d95ecdb58cdb9a6c3936 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?= Date: Fri, 14 Apr 2023 16:00:41 +0900 Subject: [PATCH] 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 --- .../components/MkReactionsViewer.details.vue | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/frontend/src/components/MkReactionsViewer.details.vue b/packages/frontend/src/components/MkReactionsViewer.details.vue index b4210be91..f5e611c62 100644 --- a/packages/frontend/src/components/MkReactionsViewer.details.vue +++ b/packages/frontend/src/components/MkReactionsViewer.details.vue @@ -10,7 +10,7 @@ -
+{{ count - 10 }}
+
+{{ count - 10 }}
@@ -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; +}