From 5dfaa37a81917786cdf91a83b6e425cdab637728 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 17 May 2022 18:11:19 +0900 Subject: [PATCH 1/2] Adjust EditMessageComposer style declarations - "max-width: 100%" to avoid flexbox from overflowing - "flex-flow: row wrap-reverse" to display "Save" over "Cancel" button - "margin-inline-start: auto" to move those buttons to the right side - "flex: 1" to set the same width for the buttons - "min-width: 100px" to align the edge of the button with text area Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EditMessageComposer.scss | 12 +++++++----- res/css/views/rooms/_EventBubbleTile.scss | 5 +++++ 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss index 23fb3a1f9b7..fa64cef8b81 100644 --- a/res/css/views/rooms/_EditMessageComposer.scss +++ b/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: fit-content; 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 } } } diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index bbc4d3c53fa..50d627b88de 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -65,6 +65,11 @@ limitations under the License. .mx_EventTile_content { margin-right: 0; + + &.mx_EditMessageComposer { + // Make sure the formatting bar is visible + overflow: visible; + } } &.mx_EventTile_continuation { From 3b055a5a0f551d97559cd177f27f3b4214cb4e8f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 18 May 2022 01:17:25 +0900 Subject: [PATCH 2/2] Replace fit-content with auto for width property Also move mx_EditMessageComposer overflow declaration from _EventBubbleTile.scss to _EventTile.scss Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EditMessageComposer.scss | 2 +- res/css/views/rooms/_EventBubbleTile.scss | 5 ----- res/css/views/rooms/_EventTile.scss | 7 +++++++ 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss index fa64cef8b81..cc5a3c7a480 100644 --- a/res/css/views/rooms/_EditMessageComposer.scss +++ b/res/css/views/rooms/_EditMessageComposer.scss @@ -19,7 +19,7 @@ limitations under the License. display: flex; flex-direction: column; max-width: 100%; // disable overflow - width: fit-content; + width: auto; gap: 5px; padding: 3px; diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 50d627b88de..bbc4d3c53fa 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -65,11 +65,6 @@ limitations under the License. .mx_EventTile_content { margin-right: 0; - - &.mx_EditMessageComposer { - // Make sure the formatting bar is visible - overflow: visible; - } } &.mx_EventTile_continuation { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 1491631059d..9f398c5594d 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/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);