Improve narrow composer usability

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;
+    }
 }

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%;

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 }