From 7a75bce1b43df290baf6842e2bb3d3eb0acd76d5 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Thu, 16 Jun 2022 15:37:59 +0200
Subject: [PATCH] Fix checkmark on interaction buttons with larger fonts
 (#1799)

Fixes #1796
---
 app/javascript/flavours/glitch/components/icon_button.js | 4 ++--
 app/javascript/flavours/glitch/styles/accessibility.scss | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/icon_button.js b/app/javascript/flavours/glitch/components/icon_button.js
index 3999409cdf..9a05badd03 100644
--- a/app/javascript/flavours/glitch/components/icon_button.js
+++ b/app/javascript/flavours/glitch/components/icon_button.js
@@ -86,13 +86,13 @@ export default class IconButton extends React.PureComponent {
   render () {
     let style = {
       fontSize: `${this.props.size}px`,
-      height: `${this.props.size * 1.28571429}px`,
+      height: '1.28571429em',
       lineHeight: `${this.props.size}px`,
       ...this.props.style,
       ...(this.props.active ? this.props.activeStyle : {}),
     };
     if (!this.props.label) {
-      style.width = `${this.props.size * 1.28571429}px`;
+      style.width = '1.28571429em';
     } else {
       style.textAlign = 'left';
     }
diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss
index 96e20f8393..9b36bfd8dd 100644
--- a/app/javascript/flavours/glitch/styles/accessibility.scss
+++ b/app/javascript/flavours/glitch/styles/accessibility.scss
@@ -22,8 +22,8 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
     content: "\F00C";
     font-size: 50%;
     font-family: FontAwesome;
-    right: -5px;
-    top: -4px;
+    right: -0.55em;
+    top: -0.44em;
   }
 }