diff options
author | DorraJaouad <dorra.jaoued7@gmail.com> | 2024-06-28 16:27:06 +0200 |
---|---|---|
committer | Maksim Sukharev <antreesy.web@gmail.com> | 2024-07-04 11:13:06 +0200 |
commit | ded6fce97d9a5f61d43e98443fed3e93cc114a22 (patch) | |
tree | b42fdbcc734d29313fc53ab62bc6b4eec76379e9 | |
parent | 191e74ba99ff603858de7bae6b24929f0c9c3086 (diff) |
fix(Reactions): improve styling in popover
Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue | 22 |
1 files changed, 16 insertions, 6 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue index 278754cda..48b036419 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue @@ -39,12 +39,15 @@ </template> <div v-if="hasReactionsLoaded" class="reaction-details"> - <span>{{ getReactionSummary(reaction) }}</span> - <NcButton v-if="reactionsCount(reaction) > 3" - type="tertiary-no-background" - @click="showAllReactions = true"> - {{ remainingReactionsLabel(reaction) }} - </NcButton> + <span>{{ getReactionSummary(reaction) }} + <a v-if="reactionsCount(reaction) > 3" + class="more-reactions-button" + role="button" + tabindex="0" + @click.prevent="showAllReactions = true"> + {{ remainingReactionsLabel(reaction) }} + </a> + </span> </div> <div v-else class="details-loading"> <NcLoadingIcon /> @@ -303,6 +306,7 @@ export default { .reaction-details { padding: 8px; + max-width: 250px; } .details-loading { @@ -311,4 +315,10 @@ export default { width: 38px; } +.more-reactions-button { + text-decoration: underline; + &:hover { + text-decoration: none; + } +} </style> |