Improve design of the rich text editor (#9533)

New design for rich text composer

res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss

@@ -14,15 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_WysiwygComposer_container {
-    position: relative;
-
+.mx_WysiwygComposer_Editor_container {
     @keyframes visualbell {
         from { background-color: $visual-bell-bg-color; }
         to { background-color: $background; }
     }
 
-    .mx_WysiwygComposer_content {
+    .mx_WysiwygComposer_Editor_content {
         white-space: pre-wrap;
         word-wrap: break-word;
         outline: none;

res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss

@@ -17,6 +17,7 @@ limitations under the License.
 .mx_FormattingButtons {
     display: flex;
     justify-content: flex-start;
+    gap: 8px;
 
     .mx_FormattingButtons_Button {
         --size: 28px;
@@ -26,18 +27,9 @@ limitations under the License.
         line-height: var(--size);
         width: auto;
         padding-left: 22px;
-        margin-right: 8px;
         background-color: transparent;
         border: none;
 
-        &:first-child {
-            margin-left: 12px;
-        }
-
-        &:last-child {
-            margin-right: auto;
-        }
-
         &::before {
             content: '';
             position: absolute;