Fix formatting buttons in edition

matrix-org · Nov 2, 2022 · 1055dd4 · 1055dd4
1 parent 479aa45
commit 1055dd4
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 11 deletions.
diff --git a/res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss b/res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss
@@ -25,6 +25,10 @@ limitations under the License.
     margin-right: 6px;
     gap: 8px;
 
+    .mx_FormattingButtons {
+        margin-left: 12px;
+    }
+
     .mx_WysiwygComposer_Editor {
         border: 1px solid;
         border-color: $quaternary-content;

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss b/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;

diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
@@ -31,7 +31,7 @@ import Stickerpicker from './Stickerpicker';
 import { makeRoomPermalink, RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import E2EIcon from './E2EIcon';
 import SettingsStore from "../../../settings/SettingsStore";
-import { aboveLeftOf, AboveLeftOf } from "../../structures/ContextMenu";
+import { aboveLeftOf } from "../../structures/ContextMenu";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ReplyPreview from "./ReplyPreview";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
@@ -428,7 +428,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
             // Instead of doing a querySelector or pass a ref to find the compute the height formatting buttons
             // We are using an arbitrary value, the formatting buttons height doesn't change during the lifecycle of the component
             // It's easier to just use a constant here instead of an over-engineering way to find the height
-            const heightToRemove = hasFormattingButtons ? 45 : 0;
+            const heightToRemove = hasFormattingButtons ? 36 : 0;
             const fixedRect = new DOMRect(
                 contentRect.x,
                 contentRect.y + heightToRemove,