diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css index d736b03cb..421c56d23 100644 --- a/app/assets/stylesheets/reactions.css +++ b/app/assets/stylesheets/reactions.css @@ -176,8 +176,8 @@ } .reaction__popup { - --panel-border-radius: 1.2em; - --panel-padding: 0.5ch; + --panel-border-radius: 1em; + --panel-padding: var(--block-space-half) var(--inline-space); --offset: calc(-1 * var(--panel-padding)); inset: var(--offset) auto auto var(--offset); @@ -187,12 +187,17 @@ .reaction__emoji-list { display: grid; + gap: var(--inline-space-half); grid-template-columns: repeat(10, 1fr); - .btn { - --btn-size: 1.5rem; + @media (max-width: 630px) { + grid-template-columns: repeat(6, 1fr); + } - font-size: 1rem; + .btn { + --btn-size: calc(1.3rem * 1.3); + + font-size: 1.3rem; position: relative; /* Make sure the focus ring sits on top of adjacent buttons */ @@ -203,7 +208,7 @@ } &:hover { - scale: 1.5; + scale: 1.3; } } } diff --git a/app/views/cards/comments/reactions/_menu.html.erb b/app/views/cards/comments/reactions/_menu.html.erb index 698ba4ad7..6bde12e82 100644 --- a/app/views/cards/comments/reactions/_menu.html.erb +++ b/app/views/cards/comments/reactions/_menu.html.erb @@ -6,7 +6,7 @@
<% EmojiHelper::REACTIONS.each do |character, title| %> - <%= tag.button character, title: title, class: "reaction__emoji-btn btn btn--circle borderless", type: "button", data: { action: "reaction-emoji#insertEmoji dialog#close", emoji: character } %> + <%= tag.button character, title: title, class: "reaction__emoji-btn btn btn--circle borderless hide-focus-ring", type: "button", data: { action: "reaction-emoji#insertEmoji dialog#close", emoji: character } %> <% end %>