ux: display all emojis reactions

src/assets/css/_mixins.scss

@@ -1,9 +1 @@
-@mixin emoji-reaction-transform($type: 'right') {
-  @if $type == 'right' {
-    transform: translateX(20px) translateX(100%);
-  }
-
-  @if $type == 'left' {
-    transform: translateX(-20px) translateX(-100%);
-  }
-}
+// Sass Mixins

src/assets/css/chat.scss

@@ -352,6 +352,10 @@ body {
 .message-wrapper {
   position: relative;
   user-select: none;
+
+  .quick-reaction-container .emoji {
+    display: inline;
+  }
 }
 
 .messageIn {
@@ -438,6 +442,13 @@ body {
   .link {
     color: inherit;
   }
+  .quick-reaction-container {
+    margin-left: 42px;
+
+    [dir="rtl"] & {
+      margin-right: 42px;
+    }
+  }
 }
 
 .messageOut {
@@ -539,6 +550,13 @@ body {
   .link {
     color: inherit;
   }
+  .quick-reaction-container {
+    margin-right: 42px;
+
+    [dir="rtl"] & {
+      margin-left: 42px;
+    }
+  }
 }
 
 .sender,
@@ -712,53 +730,6 @@ body {
   text-align: center;
 }
 
-.quick-reaction-container {
-  display: inline-block;
-  position: relative;
-  vertical-align: bottom;
-  top: 18px;
-  z-index: 2;
-  background-color: #f7f7f7;
-  border: 1px solid rgba(white, 0.9);
-  border-radius: 13px;
-  height: 26px;
-  width: max-content;
-  padding: 0px 6px;
-  @include emoji-reaction-transform('left');
-
-  .messageOut & {
-    @include emoji-reaction-transform('right');
-
-    [dir="rtl"] & {
-      @include emoji-reaction-transform('left');
-    }
-  }
-  .quick-reaction {
-    position: relative;
-    top: -2px;
-    margin: 0px 0px;
-    padding: 1px;
-    font-size: 10px;
-    &:hover {
-      //border: 1px solid #888888;
-      background-color: #e2e2e2;
-    }
-    .quick-reaction-count {
-      color: #888888;
-      font-size: 0.7rem;
-    }
-  }
-  .sent .quick-reaction-count {
-    color: black;
-    font-weight: 700;
-    // background-color: palegreen;
-  }
-
-  [dir="rtl"] & {
-    @include emoji-reaction-transform('right');
-  }
-}
-
 .download-overlay {
   position: absolute;
   left: 0;