diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue index 12783114..eb46018e 100644 --- a/src/components/emoji_reactions/emoji_reactions.vue +++ b/src/components/emoji_reactions/emoji_reactions.vue @@ -12,20 +12,20 @@ @mouseenter="fetchEmojiReactionsByIfMissing()" > + {{ reaction.name }} - {{ reaction.name }} {{ reaction.count }} @@ -49,6 +49,8 @@ margin-top: 0.25em; flex-wrap: wrap; + --emoji-size: calc(1.25em * var(--emojiReactionsScale, 1)); + .emoji-reaction { padding: 0 0.5em; margin-right: 0.5em; @@ -59,17 +61,24 @@ box-sizing: border-box; .reaction-emoji { - width: 1.25em; - height: 1.25em; + width: var(--emoji-size); + height: var(--emoji-size); margin-right: 0.25em; + line-height: var(--emoji-size); + display: flex; + justify-content: center; + align-items: center; } .reaction-emoji-content { - max-width: 1.25em; - max-height: 1.25em; + max-width: 100%; + max-height: 100%; width: auto; height: auto; + line-height: inherit; overflow: hidden; + font-size: calc(var(--emoji-size) * 0.8); + margin: 0; } &:focus { diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 65248ac1..17afc5ba 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -271,6 +271,15 @@ {{ $t('settings.no_rich_text_description') }} +
  • + + {{ $t('settings.emoji_reactions_scale') }} + +
  • {{ $t('settings.attachments') }}

  • { body.classList.remove('hidden') } -const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth }) => - ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth }) +const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) => + ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) const defaultConfigColumns = configColumns(defaultState)