Improve message editing UI (#8483)

* Improve message editing UI

Signed-off-by: Šimon Brandner <[email protected]>

* Remove weird padding on bubble layout

Signed-off-by: Šimon Brandner <[email protected]>

Author: SimonBrandner

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

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;

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;