diff --git a/res/css/views/elements/_MessageEditor.scss b/res/css/views/elements/_MessageEditor.scss
index ec6d903753..15b342b436 100644
--- a/res/css/views/elements/_MessageEditor.scss
+++ b/res/css/views/elements/_MessageEditor.scss
@@ -16,14 +16,14 @@ limitations under the License.
 
 .mx_MessageEditor {
     border-radius: 4px;
-    background-color: $header-panel-bg-color;
-    padding: 11px 13px 7px 56px;
+    padding: 3px;
+    margin: -7px -7px -5px -7px; // no idea why this is working
 
     .mx_MessageEditor_editor {
         border-radius: 4px;
         border: solid 1px #e9edf1;
         background-color: #ffffff;
-        padding: 10px;
+        padding: 3px;
         white-space: pre-wrap;
         word-wrap: break-word;
         outline: none;
@@ -49,7 +49,14 @@ limitations under the License.
         display: flex;
         flex-direction: row;
         justify-content: end;
-        padding: 5px 0;
+        padding: 5px;
+        position: absolute;
+        left: 0;
+        background: $header-panel-bg-color;
+        z-index: 100;
+        right: 0;
+        margin: 0 -110px 0 0;
+        padding-right: 108px;
 
         .mx_AccessibleButton {
             margin-left: 5px;
@@ -62,3 +69,7 @@ limitations under the License.
         height: 0;
     }
 }
+
+.mx_EventTile_last .mx_MessageEditor_buttons {
+    position: static;
+}
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index aa473ec317..93d97b2913 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -43,6 +43,10 @@ limitations under the License.
     padding-top: 0px ! important;
 }
 
+.mx_EventTile_isEditing {
+    background-color: $header-panel-bg-color;
+}
+
 .mx_EventTile .mx_SenderProfile {
     color: $primary-fg-color;
     font-size: 14px;
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 9977d10395..a4a9004041 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -540,6 +540,7 @@ module.exports = withMatrixClient(React.createClass({
 
         const classes = classNames({
             mx_EventTile: true,
+            mx_EventTile_isEditing: this.props.isEditing,
             mx_EventTile_info: isInfoMessage,
             mx_EventTile_12hr: this.props.isTwelveHour,
             mx_EventTile_encrypting: this.props.eventSendStatus === 'encrypting',