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;