diff --git a/src/components/views/rooms/MessageComposerFormatBar.tsx b/src/components/views/rooms/MessageComposerFormatBar.tsx
index 3258ce51af..e8fa773ede 100644
--- a/src/components/views/rooms/MessageComposerFormatBar.tsx
+++ b/src/components/views/rooms/MessageComposerFormatBar.tsx
@@ -66,8 +66,11 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
         this.setState({ visible: true });
         const parentRect = this.formatBarRef.current.parentElement.getBoundingClientRect();
         this.formatBarRef.current.style.left = `${selectionRect.left - parentRect.left}px`;
-        // 16 is half the height of the bar (e.g. to center it) and 18 is an offset that felt ok.
-        this.formatBarRef.current.style.top = `${selectionRect.top - parentRect.top - 16 - 18}px`;
+        const halfBarHeight = this.formatBarRef.current.clientHeight / 2; // used to center the bar
+        const offset = halfBarHeight + 2; // makes sure the bar won't cover selected text
+        const offsetLimit = halfBarHeight + offset;
+        const position = Math.max(selectionRect.top - parentRect.top - offsetLimit, -offsetLimit);
+        this.formatBarRef.current.style.top = `${position}px`;
     }
 
     public hide(): void {