Tweak alignment of reactions row, move add reaction to right and only show on hover

res/css/views/messages/_ReactionsRow.scss

@@ -20,10 +20,11 @@ limitations under the License.
 
     .mx_ReactionsRow_addReactionButton {
         position: relative;
-        display: inline-block;
+        display: none;
         width: 16px;
         height: 16px;
-        vertical-align: sub;
+        vertical-align: middle;
+        margin-left: 6px;
 
         &::before {
             content: '';
@@ -39,12 +40,16 @@ limitations under the License.
     }
 }
 
+.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
+    display: inline-block;
+}
+
 .mx_ReactionsRow_showAll {
     text-decoration: none;
     font-size: $font-10px;
     font-weight: 600;
     margin-left: 6px;
-    vertical-align: top;
+    vertical-align: middle;
 
     &:hover,
     &:link,

res/css/views/messages/_ReactionsRowButton.scss

@@ -16,14 +16,15 @@ limitations under the License.
 
 .mx_ReactionsRowButton {
     display: inline-flex;
-    line-height: $font-21px;
+    line-height: $font-20px;
     margin-right: 6px;
-    padding: 0 6px;
+    padding: 1px 6px;
     border: 1px solid $reaction-row-button-border-color;
     border-radius: 10px;
     background-color: $reaction-row-button-bg-color;
     cursor: pointer;
     user-select: none;
+    vertical-align: middle;
 
     &:hover {
         border-color: $reaction-row-button-hover-border-color;

src/components/views/messages/ReactionsRow.js

@@ -192,8 +192,8 @@ export default class ReactionsRow extends React.PureComponent {
             aria-label={_t("Reactions")}
         >
             { items }
-            { addReactionButton }
             { showAllButton }
+            { addReactionButton }
         </div>;
     }
 }