Adjust EditMessageComposer style declarations (#8631)

Author: luixxiul

res/css/views/rooms/_EditMessageComposer.scss

@@ -18,12 +18,11 @@ limitations under the License.
 .mx_EditMessageComposer {
     display: flex;
     flex-direction: column;
+    max-width: 100%; // disable overflow
+    width: auto;
     gap: 5px;
     padding: 3px;
 
-    // Make sure the formatting bar is visible
-    overflow: visible !important; // override mx_EventTile_content
-
     .mx_BasicMessageComposer_input {
         border-radius: 4px;
         border: solid 1px $primary-hairline-color;
@@ -38,12 +37,15 @@ limitations under the License.
 
     .mx_EditMessageComposer_buttons {
         display: flex;
-        flex-direction: row;
+        flex-flow: row wrap-reverse; // display "Save" over "Cancel"
         justify-content: flex-end;
         gap: 5px;
+        margin-inline-start: auto;
 
         .mx_AccessibleButton {
-            padding: 5px 40px;
+            flex: 1;
+            box-sizing: border-box;
+            min-width: 100px; // magic number to align the edge of the button with the input area
         }
     }
 }

res/css/views/rooms/_EventTile.scss

@@ -51,6 +51,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         mask-image: url('$(res)/img/element-icons/circle-sending.svg');
     }
 
+    .mx_EventTile_content {
+        &.mx_EditMessageComposer {
+            // Make sure the formatting bar is visible
+            overflow: visible;
+        }
+    }
+
     &[data-layout=group] {
         .mx_EventTile_line {
             line-height: var(--GroupLayout-EventTile-line-height);