From d5af88249acf24155bf2f7e1956dd7956759ffbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 16 Apr 2021 15:31:30 +0200
Subject: [PATCH 01/22] Add rounded corners
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EditMessageComposer.scss | 1 +
 res/css/views/rooms/_EventTile.scss           | 1 +
 2 files changed, 2 insertions(+)

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index 214bfc4a1a9..88cc8e48d49 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -49,6 +49,7 @@ limitations under the License.
         right: 0;
         margin: 0 -110px 0 0;
         padding-right: 147px;
+        border-radius: 0 0 8px 8px;
 
         .mx_AccessibleButton {
             margin-left: 5px;
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 028d9a75562..878c0d21a98 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -52,6 +52,7 @@ $left-gutter: 64px;
 
 .mx_EventTile_isEditing {
     background-color: $header-panel-bg-color;
+    border-radius: 8px 8px 0 0;
 }
 
 .mx_EventTile .mx_SenderProfile {

From 51b752e4ccaf328cc11b33ace3d6d8e83808c288 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 16 Apr 2021 15:33:04 +0200
Subject: [PATCH 02/22] Avoid timeline jumps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EditMessageComposer.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index 88cc8e48d49..4baaa587ccf 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -30,7 +30,7 @@ limitations under the License.
         border: solid 1px $primary-hairline-color;
         background-color: $primary-bg-color;
         max-height: 200px;
-        padding: 3px 6px;
+        padding: 2px 6px;
 
         &:focus {
             border-color: $accent-color-50pct;

From c582e2812b23b926b773202e6b173b74c88b2a1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 16 Apr 2021 21:04:47 +0200
Subject: [PATCH 03/22] Make the edit message composer smaller
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EditMessageComposer.scss     | 15 +++++++++++++--
 res/css/views/rooms/_EventTile.scss               |  8 ++++++--
 src/components/views/rooms/EditMessageComposer.js |  1 +
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index 4baaa587ccf..df52bc701f4 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -24,6 +24,17 @@ limitations under the License.
     margin: -7px -10px -5px -10px;
     overflow: visible !important;   // override mx_EventTile_content
 
+    .mx_EditMessageComposer_header {
+        position: absolute;
+        left: 0;
+        right: 0;
+        //height of the mx_BasicMessageComposer
+        bottom: 26px;
+        // What looks good
+        height: 8px;
+        border-radius: 8px 8px 0 0;
+        background-color: $header-panel-bg-color;
+    }
 
     .mx_BasicMessageComposer_input {
         border-radius: 4px;
@@ -47,8 +58,8 @@ limitations under the License.
         background: $header-panel-bg-color;
         z-index: 100;
         right: 0;
-        margin: 0 -110px 0 0;
-        padding-right: 147px;
+        // mx_EditMessageComposer margin (34px) + padding (3px)
+        padding-right: 37px;
         border-radius: 0 0 8px 8px;
 
         .mx_AccessibleButton {
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 878c0d21a98..159fcd0d16f 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -51,8 +51,12 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile_isEditing {
-    background-color: $header-panel-bg-color;
-    border-radius: 8px 8px 0 0;
+    //background-color: $header-panel-bg-color;
+    //border-radius: 8px 8px 0 0;
+
+    .mx_EventTile_line {
+        background-color: $header-panel-bg-color;
+    }
 }
 
 .mx_EventTile .mx_SenderProfile {
diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js
index b006fe8c8d7..eb45de461cf 100644
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@@ -281,6 +281,7 @@ export default class EditMessageComposer extends React.Component {
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this._onKeyDown}>
+            <div className="mx_EditMessageComposer_header"></div>
             <BasicMessageComposer
                 ref={this._setEditorRef}
                 model={this.model}

From 7e5e35859ce81cdaf588192642d034d61ed6fad3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 17 Apr 2021 10:49:23 +0200
Subject: [PATCH 04/22] Remove commented lines
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EventTile.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 159fcd0d16f..831b5b64cfa 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -51,9 +51,6 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile_isEditing {
-    //background-color: $header-panel-bg-color;
-    //border-radius: 8px 8px 0 0;
-
     .mx_EventTile_line {
         background-color: $header-panel-bg-color;
     }

From ed57fc3474fda95a731ab3866b3e6b389342b727 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 17 Apr 2021 10:57:51 +0200
Subject: [PATCH 05/22] Rework editMessageComposer with absolute position
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EditMessageComposer.scss | 67 ++++++++-----------
 src/components/views/messages/TextualBody.js  | 22 ++++--
 .../views/rooms/EditMessageComposer.js        | 34 +++++-----
 3 files changed, 63 insertions(+), 60 deletions(-)

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index df52bc701f4..93d7b00f986 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -16,51 +16,45 @@ limitations under the License.
 */
 
 .mx_EditMessageComposer {
+    background: $header-panel-bg-color;
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    border-radius: 8px;
+    padding: 6px;
+    // padding 6px + mx_BasicMessageComposer_input padding 2px
+    top: -8px;
 
-    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
-
-    .mx_EditMessageComposer_header {
-        position: absolute;
-        left: 0;
-        right: 0;
-        //height of the mx_BasicMessageComposer
-        bottom: 26px;
-        // What looks good
-        height: 8px;
-        border-radius: 8px 8px 0 0;
-        background-color: $header-panel-bg-color;
+    &:hover {
+        // A 4px border appears on the event tile if it's being hovers
+        // that shifts the whole event to the right and therefore we
+        // try to balance that here to avoid any movement
+        left: -4px;
     }
 
-    .mx_BasicMessageComposer_input {
-        border-radius: 4px;
-        border: solid 1px $primary-hairline-color;
-        background-color: $primary-bg-color;
-        max-height: 200px;
-        padding: 2px 6px;
+    .mx_BasicMessageComposer {
+        .mx_BasicMessageComposer_input {
+            border-radius: 4px;
+            border: solid 1px $primary-hairline-color;
+            background-color: $primary-bg-color;
+            max-height: 200px;
+            padding: 2px 6px;
+            // TODO: Why?
+            margin-left: 51px;
 
-        &:focus {
-            border-color: $accent-color-50pct;
+            &:focus {
+                border-color: $accent-color-50pct;
+            }
         }
     }
 
     .mx_EditMessageComposer_buttons {
+        // Match padding of mx_EditMessageComposer
+        padding-top: 6px;
         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;
-        // mx_EditMessageComposer margin (34px) + padding (3px)
-        padding-right: 37px;
-        border-radius: 0 0 8px 8px;
 
         .mx_AccessibleButton {
             margin-left: 5px;
@@ -68,8 +62,3 @@ limitations under the License.
         }
     }
 }
-
-.mx_EventTile_last .mx_EditMessageComposer_buttons {
-    position: static;
-    margin-right: -147px;
-}
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 353f40b6a90..3dceaf2d58f 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -486,9 +486,12 @@ export default class TextualBody extends React.Component {
     }
 
     render() {
+        let editor;
         if (this.props.editState) {
             const EditMessageComposer = sdk.getComponent('rooms.EditMessageComposer');
-            return <EditMessageComposer editState={this.props.editState} className="mx_EventTile_content" />;
+            editor = (
+                <EditMessageComposer editState={this.props.editState} />
+            );
         }
         const mxEvent = this.props.mxEvent;
         const content = mxEvent.getContent();
@@ -529,9 +532,10 @@ export default class TextualBody extends React.Component {
             });
         }
 
+        let textualBody;
         switch (content.msgtype) {
             case "m.emote":
-                return (
+                textualBody = (
                     <span className="mx_MEmoteBody mx_EventTile_content">
                         *&nbsp;
                         <span
@@ -545,20 +549,30 @@ export default class TextualBody extends React.Component {
                         { widgets }
                     </span>
                 );
+                break;
             case "m.notice":
-                return (
+                textualBody = (
                     <span className="mx_MNoticeBody mx_EventTile_content">
                         { body }
                         { widgets }
                     </span>
                 );
+                break;
             default: // including "m.text"
-                return (
+                textualBody = (
                     <span className="mx_MTextBody mx_EventTile_content">
                         { body }
                         { widgets }
                     </span>
                 );
+                break;
         }
+
+        return (
+            <div>
+                {editor}
+                {textualBody}
+            </div>
+        );
     }
 }
diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js
index eb45de461cf..2296de15cd5 100644
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@@ -26,7 +26,6 @@ import {findEditableEvent} from '../../../utils/EventUtils';
 import {parseEvent} from '../../../editor/deserialize';
 import {PartCreator} from '../../../editor/parts';
 import EditorStateTransfer from '../../../utils/EditorStateTransfer';
-import classNames from 'classnames';
 import {EventStatus} from 'matrix-js-sdk/src/models/event';
 import BasicMessageComposer from "./BasicMessageComposer";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -280,22 +279,23 @@ export default class EditMessageComposer extends React.Component {
 
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this._onKeyDown}>
-            <div className="mx_EditMessageComposer_header"></div>
-            <BasicMessageComposer
-                ref={this._setEditorRef}
-                model={this.model}
-                room={this._getRoom()}
-                initialCaret={this.props.editState.getCaret()}
-                label={_t("Edit message")}
-                onChange={this._onChange}
-            />
-            <div className="mx_EditMessageComposer_buttons">
-                <AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton>
-                <AccessibleButton kind="primary" onClick={this._sendEdit} disabled={this.state.saveDisabled}>
-                    {_t("Save")}
-                </AccessibleButton>
+        return (
+            <div className="mx_EditMessageComposer" onKeyDown={this._onKeyDown}>
+                <BasicMessageComposer
+                    ref={this._setEditorRef}
+                    model={this.model}
+                    room={this._getRoom()}
+                    initialCaret={this.props.editState.getCaret()}
+                    label={_t("Edit message")}
+                    onChange={this._onChange}
+                />
+                <div className="mx_EditMessageComposer_buttons">
+                    <AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton>
+                    <AccessibleButton kind="primary" onClick={this._sendEdit} disabled={this.state.saveDisabled}>
+                        {_t("Save")}
+                    </AccessibleButton>
+                </div>
             </div>
-        </div>);
+        );
     }
 }

From 26969cb0cce4b6d7f1a512962e4e16bd4dc25e32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 17 Apr 2021 12:20:28 +0200
Subject: [PATCH 06/22] Increase avatar z-index
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

So that the editMessageComposer is below it

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EventTile.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 831b5b64cfa..591cafeea71 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -34,6 +34,7 @@ $left-gutter: 64px;
     left: 8px;
     cursor: pointer;
     user-select: none;
+    z-index: 101;
 }
 
 .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {

From df29f896bdd73a73e8262b231bbc90d1c613d852 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 17 Apr 2021 12:26:59 +0200
Subject: [PATCH 07/22] Avoid overlap with sender profile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EditMessageComposer.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index 93d7b00f986..8c789669f1e 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -22,9 +22,9 @@ limitations under the License.
     right: 0;
     z-index: 100;
     border-radius: 8px;
-    padding: 6px;
+    padding: 2px;
     // padding 6px + mx_BasicMessageComposer_input padding 2px
-    top: -8px;
+    top: -4px;
 
     &:hover {
         // A 4px border appears on the event tile if it's being hovers
@@ -41,7 +41,7 @@ limitations under the License.
             max-height: 200px;
             padding: 2px 6px;
             // TODO: Why?
-            margin-left: 51px;
+            margin-left: 55px;
 
             &:focus {
                 border-color: $accent-color-50pct;

From 2c273e9625a3bc7520a02e2936080732a6f56cbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 17 Apr 2021 13:24:57 +0200
Subject: [PATCH 08/22] More properly fix hover jumps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index 8c789669f1e..a48eafcb2fd 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -26,13 +26,6 @@ limitations under the License.
     // padding 6px + mx_BasicMessageComposer_input padding 2px
     top: -4px;
 
-    &:hover {
-        // A 4px border appears on the event tile if it's being hovers
-        // that shifts the whole event to the right and therefore we
-        // try to balance that here to avoid any movement
-        left: -4px;
-    }
-
     .mx_BasicMessageComposer {
         .mx_BasicMessageComposer_input {
             border-radius: 4px;
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 591cafeea71..f2fa183e434 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -53,6 +53,10 @@ $left-gutter: 64px;
 
 .mx_EventTile_isEditing {
     .mx_EventTile_line {
+        &:hover {
+            border-left: none !important;
+        }
+
         background-color: $header-panel-bg-color;
     }
 }

From fc811342768ab3292a3e536dacd3f1a9955fa0f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 17 Apr 2021 13:38:33 +0200
Subject: [PATCH 09/22] Contain sender name
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EditMessageComposer.scss | 14 ++++++++++++--
 res/css/views/rooms/_EventTile.scss           |  2 ++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index a48eafcb2fd..4a79900d633 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -23,8 +23,10 @@ limitations under the License.
     z-index: 100;
     border-radius: 8px;
     padding: 2px;
-    // padding 6px + mx_BasicMessageComposer_input padding 2px
-    top: -4px;
+    // To contain the avatar and sender
+    padding-top: 32px;
+    // padding 32px + mx_BasicMessageComposer_input padding 2px
+    top: -34px;
 
     .mx_BasicMessageComposer {
         .mx_BasicMessageComposer_input {
@@ -55,3 +57,11 @@ limitations under the License.
         }
     }
 }
+
+.mx_EventTile_continuation {
+    .mx_EditMessageComposer {
+        padding: 2px;
+        // padding 2px + mx_BasicMessageComposer_input padding 2px
+        top: -4px;
+    }
+}
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index f2fa183e434..e5e2b167215 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -62,6 +62,8 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile .mx_SenderProfile {
+    position: relative;
+    z-index: 101;
     color: $primary-fg-color;
     font-size: $font-14px;
     display: inline-block; /* anti-zalgo, with overflow hidden */

From daceb2f984d5ec49dbc62bec4f34ea429a761cc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 17 Apr 2021 14:05:09 +0200
Subject: [PATCH 10/22] Increase padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EditMessageComposer.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index 4a79900d633..5afb5cacb5e 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -22,7 +22,7 @@ limitations under the License.
     right: 0;
     z-index: 100;
     border-radius: 8px;
-    padding: 2px;
+    padding: 4px;
     // To contain the avatar and sender
     padding-top: 32px;
     // padding 32px + mx_BasicMessageComposer_input padding 2px
@@ -60,8 +60,8 @@ limitations under the License.
 
 .mx_EventTile_continuation {
     .mx_EditMessageComposer {
-        padding: 2px;
-        // padding 2px + mx_BasicMessageComposer_input padding 2px
-        top: -4px;
+        padding: 4px;
+        // padding 4px + mx_BasicMessageComposer_input padding 2px
+        top: -6px;
     }
 }

From 672d9b08d9278ee6988f19bc7605a182fb9bb40e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 17 Apr 2021 14:29:13 +0200
Subject: [PATCH 11/22] Fix left margin
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EditMessageComposer.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index 5afb5cacb5e..d63548dd8f5 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -35,8 +35,8 @@ limitations under the License.
             background-color: $primary-bg-color;
             max-height: 200px;
             padding: 2px 6px;
-            // TODO: Why?
-            margin-left: 55px;
+            // mx_EventTile left-gutter 64px - border 1px - padding 6px - mx_EditMessageComposer 4px
+            margin-left: 53px;
 
             &:focus {
                 border-color: $accent-color-50pct;

From c4f7696f7e57de814ef1ad28bc075de6a6dd9da8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 17 Apr 2021 14:45:43 +0200
Subject: [PATCH 12/22] Place buttons above the sender profile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EditMessageComposer.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index d63548dd8f5..b297d56702e 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -16,11 +16,10 @@ limitations under the License.
 */
 
 .mx_EditMessageComposer {
-    background: $header-panel-bg-color;
+    background-color: $header-panel-bg-color;
     position: absolute;
     left: 0;
     right: 0;
-    z-index: 100;
     border-radius: 8px;
     padding: 4px;
     // To contain the avatar and sender
@@ -29,6 +28,7 @@ limitations under the License.
     top: -34px;
 
     .mx_BasicMessageComposer {
+        background-color: $header-panel-bg-color;
         .mx_BasicMessageComposer_input {
             border-radius: 4px;
             border: solid 1px $primary-hairline-color;
@@ -45,11 +45,15 @@ limitations under the License.
     }
 
     .mx_EditMessageComposer_buttons {
+        background-color: $header-panel-bg-color;
         // Match padding of mx_EditMessageComposer
+        position: relative;
         padding-top: 6px;
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
+        // Place this above the sender profile
+        z-index: 102;
 
         .mx_AccessibleButton {
             margin-left: 5px;

From c32332ebead8cbe2318161aac1243355dcf1c745 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 17 Apr 2021 14:53:57 +0200
Subject: [PATCH 13/22] Fix jumps on sender profile hovered
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EventTile.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index e5e2b167215..d75905d2a91 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -52,12 +52,10 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile_isEditing {
-    .mx_EventTile_line {
-        &:hover {
+    &:hover {
+        .mx_EventTile_line {
             border-left: none !important;
         }
-
-        background-color: $header-panel-bg-color;
     }
 }
 

From 3677d61a7dd9c68c8e606bd2e06eaad8324d5308 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 17 Apr 2021 15:13:28 +0200
Subject: [PATCH 14/22] A little saner solution to z-indexes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EditMessageComposer.scss |  5 +----
 res/css/views/rooms/_EventTile.scss           | 12 ++++++++++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index b297d56702e..15228bf99ee 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -26,9 +26,9 @@ limitations under the License.
     padding-top: 32px;
     // padding 32px + mx_BasicMessageComposer_input padding 2px
     top: -34px;
+    z-index: 100;
 
     .mx_BasicMessageComposer {
-        background-color: $header-panel-bg-color;
         .mx_BasicMessageComposer_input {
             border-radius: 4px;
             border: solid 1px $primary-hairline-color;
@@ -45,15 +45,12 @@ limitations under the License.
     }
 
     .mx_EditMessageComposer_buttons {
-        background-color: $header-panel-bg-color;
         // Match padding of mx_EditMessageComposer
         position: relative;
         padding-top: 6px;
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
-        // Place this above the sender profile
-        z-index: 102;
 
         .mx_AccessibleButton {
             margin-left: 5px;
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index d75905d2a91..c88af87f62a 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -34,7 +34,6 @@ $left-gutter: 64px;
     left: 8px;
     cursor: pointer;
     user-select: none;
-    z-index: 101;
 }
 
 .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
@@ -57,11 +56,20 @@ $left-gutter: 64px;
             border-left: none !important;
         }
     }
+
+    .mx_EventTile_avatar {
+        // Place this avatar the editor
+        z-index: 101;
+    }
+
+    .mx_SenderProfile {
+        // Place sender profile above the editor
+        z-index: 101;
+    }
 }
 
 .mx_EventTile .mx_SenderProfile {
     position: relative;
-    z-index: 101;
     color: $primary-fg-color;
     font-size: $font-14px;
     display: inline-block; /* anti-zalgo, with overflow hidden */

From 79a7b4157b1f08054c7113fc5a50b62265d5dfe7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 17 Apr 2021 20:56:21 +0200
Subject: [PATCH 15/22] Add padding to the last event if edited
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This somewhat works

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EventTile.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index c88af87f62a..3581d84ad87 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -68,6 +68,11 @@ $left-gutter: 64px;
     }
 }
 
+.mx_EventTile_isEditing.mx_EventTile_last {
+    // This number is from fiddling with this with inspector
+    padding-bottom: 28px;
+}
+
 .mx_EventTile .mx_SenderProfile {
     position: relative;
     color: $primary-fg-color;

From 4ea619334c800e61ab45e78bb81d03781fec3264 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 11 May 2021 07:09:07 +0200
Subject: [PATCH 16/22] Make comments inline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EditMessageComposer.scss | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index 15228bf99ee..010bf02e7c4 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -21,10 +21,8 @@ limitations under the License.
     left: 0;
     right: 0;
     border-radius: 8px;
-    padding: 4px;
-    // To contain the avatar and sender
-    padding-top: 32px;
-    // padding 32px + mx_BasicMessageComposer_input padding 2px
+    padding: 4px; // To contain the avatar and sender
+    padding-top: 32px; // padding 32px + mx_BasicMessageComposer_input padding 2px
     top: -34px;
     z-index: 100;
 
@@ -34,8 +32,7 @@ limitations under the License.
             border: solid 1px $primary-hairline-color;
             background-color: $primary-bg-color;
             max-height: 200px;
-            padding: 2px 6px;
-            // mx_EventTile left-gutter 64px - border 1px - padding 6px - mx_EditMessageComposer 4px
+            padding: 2px 6px; // mx_EventTile left-gutter 64px - border 1px - padding 6px - mx_EditMessageComposer 4px
             margin-left: 53px;
 
             &:focus {
@@ -45,9 +42,8 @@ limitations under the License.
     }
 
     .mx_EditMessageComposer_buttons {
-        // Match padding of mx_EditMessageComposer
         position: relative;
-        padding-top: 6px;
+        padding-top: 6px; // Match padding of mx_EditMessageComposer
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
@@ -62,7 +58,6 @@ limitations under the License.
 .mx_EventTile_continuation {
     .mx_EditMessageComposer {
         padding: 4px;
-        // padding 4px + mx_BasicMessageComposer_input padding 2px
-        top: -6px;
+        top: -6px; // padding 4px + mx_BasicMessageComposer_input padding 2px
     }
 }

From a6956dbd1f539be3f7f6e22309476317d9ca34a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 11 May 2021 07:14:45 +0200
Subject: [PATCH 17/22] Add missing "above"
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EventTile.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 3581d84ad87..d043e515c88 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -58,7 +58,7 @@ $left-gutter: 64px;
     }
 
     .mx_EventTile_avatar {
-        // Place this avatar the editor
+        // Place this avatar above the editor
         z-index: 101;
     }
 

From bc131a253b970be12fbe87f3860dd5f8a162ef53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 11 May 2021 07:21:54 +0200
Subject: [PATCH 18/22] Add explenation about moving up the last event when
 editing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EventTile.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 75a8cc0a7ec..224b7c36d92 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -69,7 +69,9 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile_isEditing.mx_EventTile_last {
-    // This number is from fiddling with this with inspector
+    // This number is from fiddling with this with inspector. It moves the last
+    // event up when editing to avoid the edit message composer being below the
+    // main composer
     padding-bottom: 28px;
 }
 

From 0b49910d0a5a1c710e7e217f6a26c406f2ae22ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 11 May 2021 07:27:06 +0200
Subject: [PATCH 19/22] Add comment about mx_EditMessageComposer's position
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EditMessageComposer.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index 010bf02e7c4..7df2d855af6 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -17,7 +17,7 @@ limitations under the License.
 
 .mx_EditMessageComposer {
     background-color: $header-panel-bg-color;
-    position: absolute;
+    position: absolute; // The mx_EditMessageComposer is positioned relatively to the corresponding EventTile_line
     left: 0;
     right: 0;
     border-radius: 8px;

From f6126e33a23c41030a23aa8a60b5028a7502687f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 11 May 2021 07:28:36 +0200
Subject: [PATCH 20/22] Comment about mx_EditMessageComposer's z-index
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EditMessageComposer.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss
index 7df2d855af6..71d5af17bd7 100644
--- a/res/css/views/rooms/_EditMessageComposer.scss
+++ b/res/css/views/rooms/_EditMessageComposer.scss
@@ -24,7 +24,7 @@ limitations under the License.
     padding: 4px; // To contain the avatar and sender
     padding-top: 32px; // padding 32px + mx_BasicMessageComposer_input padding 2px
     top: -34px;
-    z-index: 100;
+    z-index: 100; // Place the mx_EditMessageComposer above the timeline
 
     .mx_BasicMessageComposer {
         .mx_BasicMessageComposer_input {

From 81c944cea28ab39487923e7943182ebb82d614ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 11 May 2021 07:33:42 +0200
Subject: [PATCH 21/22] Make comments inline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EventTile.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 224b7c36d92..6dd78a8e918 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -58,13 +58,11 @@ $left-gutter: 64px;
     }
 
     .mx_EventTile_avatar {
-        // Place this avatar above the editor
-        z-index: 101;
+        z-index: 101; // Place this avatar above the editor
     }
 
     .mx_SenderProfile {
-        // Place sender profile above the editor
-        z-index: 101;
+        z-index: 101; // Place sender profile above the editor
     }
 }
 

From f79761b3b74378713db2c219a477c0ddc61abc0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 11 May 2021 07:35:03 +0200
Subject: [PATCH 22/22] Add comment about why we use important here
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EventTile.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 6dd78a8e918..8f95935af10 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -53,7 +53,7 @@ $left-gutter: 64px;
 .mx_EventTile_isEditing {
     &:hover {
         .mx_EventTile_line {
-            border-left: none !important;
+            border-left: none !important; // Override .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line
         }
     }