From d9905542908b4b0909e3b5a58835890ee4576898 Mon Sep 17 00:00:00 2001
From: Rishabh Saxena <rishabh.robben@gmail.com>
Date: Wed, 1 Sep 2021 20:28:23 +0530
Subject: [PATCH] fix: center align emoji for non-retina displays (#7023)

---
 .../src/components/ads/EmojiReactions.tsx       | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/client/src/components/ads/EmojiReactions.tsx b/app/client/src/components/ads/EmojiReactions.tsx
index b198632111..fe465622a6 100644
--- a/app/client/src/components/ads/EmojiReactions.tsx
+++ b/app/client/src/components/ads/EmojiReactions.tsx
@@ -31,10 +31,20 @@ const Bubble = styled.div<{ active?: boolean }>`
   margin-right: ${(props) => `${props.theme.radii[1]}px`};
   margin-top: ${(props) => `${props.theme.radii[1]}px`};
 
-  /* At times the rendered emoji has width as 16px */
   & span.emoji {
-    min-width: 20px;
-    text-align: center;
+    /*
+    * center align emoji for non-retina displays
+    * https://bugs.chromium.org/p/chromium/issues/detail?id=551420#c15
+    * ref: https://stackoverflow.com/a/31578187/1543567 (mq for non-retina displays)
+    */
+    @media not screen and (-webkit-min-device-pixel-ratio: 2),
+      not screen and (min--moz-device-pixel-ratio: 2),
+      not screen and (-o-min-device-pixel-ratio: 2/1),
+      not screen and (min-device-pixel-ratio: 2),
+      not screen and (min-resolution: 192dpi),
+      not screen and (min-resolution: 2dppx) {
+      margin-right: 3px;
+    }
   }
 `;
 
@@ -48,6 +58,7 @@ const Count = styled.div<{ active?: boolean }>`
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  margin-left: 2px;
 `;
 
 const ReactionsByContainer = styled.span`