From d4ca087abe7c866704093d0b9b2f9e51f907413a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Aug 2019 14:51:49 +0200 Subject: [PATCH] fix styling issues - grow/shrink between min and max height correctly - don't grow wider than available space - some space between editor and buttons --- res/css/views/rooms/_SendMessageComposer.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_SendMessageComposer.scss b/res/css/views/rooms/_SendMessageComposer.scss index ce5043a5bb..ffa20d29fa 100644 --- a/res/css/views/rooms/_SendMessageComposer.scss +++ b/res/css/views/rooms/_SendMessageComposer.scss @@ -16,17 +16,22 @@ limitations under the License. .mx_SendMessageComposer { flex: 1; - min-height: 50px; display: flex; flex-direction: column; font-size: 14px; justify-content: center; display: flex; + margin-right: 6px; + // don't grow wider than available space + min-width: 0; .mx_BasicMessageComposer { flex: 1; display: flex; flex-direction: column; + // min-height at this level so the mx_BasicMessageComposer_input + // still stays vertically centered when less than 50px + min-height: 50px; .mx_BasicMessageComposer_input { padding: 3px 0; @@ -35,6 +40,9 @@ limitations under the License. // while keeping the autocomplete at the top // of the composer. The parent needs to be a flex container for this to work. margin: auto 0; + // max-height at this level so autocomplete doesn't get scrolled too + max-height: 140px; + overflow-y: auto; } } }