Add style for WysiwygComposer

res/css/_components.pcss

@@ -295,6 +295,7 @@
 @import "./views/rooms/_TopUnreadMessagesBar.pcss";
 @import "./views/rooms/_VoiceRecordComposerTile.pcss";
 @import "./views/rooms/_WhoIsTypingTile.pcss";
+@import "./views/rooms/wysiwyg_composer/_WysiwygComposer.pcss";
 @import "./views/settings/_AvatarSetting.pcss";
 @import "./views/settings/_CrossSigningPanel.pcss";
 @import "./views/settings/_CryptographyPanel.pcss";

res/css/views/rooms/wysiwyg_composer/_WysiwygComposer.pcss

@@ -0,0 +1,53 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_WysiwygComposer {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    font-size: $font-14px;
+    /* fixed line height to prevent emoji from being taller than text */
+    line-height: $font-18px;
+    justify-content: center;
+    margin-right: 6px;
+    /* don't grow wider than available space */
+    min-width: 0;
+
+    .mx_WysiwygComposer_container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        /* min-height at this level so the mx_BasicMessageComposer_input */
+        /* still stays vertically centered when less than 55px. */
+        /* We also set this to ensure the voice message recording widget */
+        /* doesn't cause a jump. */
+        min-height: 55px;
+
+        .mx_WysiwygComposer_content {
+            border: 1px solid;
+            border-radius: 20px;
+            padding: 8px 10px;
+            /* this will center the contenteditable */
+            /* in it's parent vertically */
+            /* 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;
+        }
+    }
+}

src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx

@@ -52,9 +52,11 @@ export function WysiwygComposer(
     }, [content, mxClient, roomContext, wysiwyg, props, ref]);
 
     return (
-        <>
+        <div className="mx_WysiwygComposer">
-            <div className="mx_SendMessageComposer" style={{ minHeight: '30px', marginBottom: '5px' }} ref={ref} contentEditable={!disabled && isWysiwygReady} />
+            <div className="mx_WysiwygComposer_container">
+                <div className="mx_WysiwygComposer_content" ref={ref} contentEditable={!disabled && isWysiwygReady} />
+            </div>
             { children?.(memoizedSendMessage) }
-        </>
+        </div>
     );
 }