From 1e73184b78ba2c5a4e401e6288182f0a8bf50218 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 12 May 2022 12:27:06 +0200
Subject: [PATCH] Improve message editing UI (#8483)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Improve message editing UI

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove weird padding on bubble layout

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EditMessageComposer.scss | 27 +++++--------------
 res/css/views/rooms/_EventBubbleTile.scss     |  7 -----
 res/css/views/rooms/_EventTile.scss           | 10 +------
 3 files changed, 8 insertions(+), 36 deletions(-)

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index af7f0f8049..23fb3a1f9b 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -16,13 +16,13 @@ limitations under the License.
 */
 
 .mx_EditMessageComposer {
-
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
     padding: 3px;
-    // this is to try not make the text move but still have some
-    // padding around and in the editor.
-    // Actual values from fiddling around in inspector
-    margin: -7px -10px -5px -10px;
-    overflow: visible !important;   // override mx_EventTile_content
+
+    // Make sure the formatting bar is visible
+    overflow: visible !important; // override mx_EventTile_content
 
     .mx_BasicMessageComposer_input {
         border-radius: 4px;
@@ -40,23 +40,10 @@ limitations under the License.
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
-        padding: 5px;
-        position: absolute;
-        left: 0;
-        background: $header-panel-bg-color;
-        z-index: 100;
-        right: 0;
-        margin: 0 -110px 0 0;
-        padding-right: 147px;
+        gap: 5px;
 
         .mx_AccessibleButton {
-            margin-left: 5px;
             padding: 5px 40px;
         }
     }
 }
-
-.mx_EventTile_last .mx_EditMessageComposer_buttons {
-    position: static;
-    margin-right: -147px;
-}
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 886e0162e3..a4814c3faf 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -423,13 +423,6 @@ limitations under the License.
         }
     }
 
-    .mx_EditMessageComposer_buttons {
-        position: static;
-        padding: 0;
-        margin: 8px 0 0;
-        background: transparent;
-    }
-
     .mx_ReactionsRow {
         margin-right: -18px;
         margin-left: -9px;
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 54cf7c888c..60f72600bf 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -121,15 +121,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
 
     &.mx_EventTile_continuation {
         padding-top: 0px !important;
-
-        &.mx_EventTile_isEditing {
-            padding-top: 5px !important;
-            margin-top: -5px;
-        }
-    }
-
-    &.mx_EventTile_isEditing {
-        background-color: $header-panel-bg-color;
     }
 
     .mx_DisambiguatedProfile {
@@ -177,6 +168,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     /* this is used for the tile for the event which is selected via the URL.
      * TODO: ultimately we probably want some transition on here.
      */
+    &.mx_EventTile_isEditing > .mx_EventTile_line,
     &.mx_EventTile_selected > .mx_EventTile_line {
         box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $accent;
         background-color: $event-selected-color;