From aa534442670f817ff700a509721a31ace645e61f Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Thu, 9 Sep 2021 13:27:25 +0100
Subject: [PATCH] Improve narrow composer usability

---
 res/css/views/rooms/_EventTile.scss            | 4 ++++
 res/css/views/rooms/_MessageComposer.scss      | 4 ++--
 src/components/views/rooms/MessageComposer.tsx | 3 +--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 351abc5cd9..4495ec4f29 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -733,4 +733,8 @@ $hover-select-border: 4px;
         padding-bottom: 5px;
         margin-bottom: 5px;
     }
+
+    .mx_MessageComposer_sendMessage {
+        margin-right: 0;
+    }
 }
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index faa3171d67..9ba966c083 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -221,7 +221,8 @@ limitations under the License.
         border-radius: 50%;
     }
 
-    &:hover {
+    &:hover,
+    &.mx_MessageComposer_closeButtonMenu {
         &::after {
             background: rgba($accent-color, 0.1);
         }
@@ -265,7 +266,6 @@ limitations under the License.
 .mx_MessageComposer_sendMessage {
     cursor: pointer;
     position: relative;
-    margin-right: 6px;
     width: 32px;
     height: 32px;
     border-radius: 100%;
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index 6372ecc1f5..dd6ce10825 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -30,7 +30,6 @@ import SettingsStore from "../../../settings/SettingsStore";
 import {
     aboveLeftOf,
     ContextMenu,
-    ContextMenuTooltipButton,
     useContextMenu,
     MenuItem,
 } from "../../structures/ContextMenu";
@@ -113,7 +112,7 @@ const EmojiButton: React.FC<IEmojiButtonProps> = ({ addEmoji, menuPosition, narr
             className={className}
             onClick={openMenu}
             title={!narrowMode && _t('Emoji picker')}
-            label={narrowMode && _t("Send an emoji")}
+            label={narrowMode && _t("Add emoji")}
         />
 
         { contextMenu }