diff --git a/src/components/views/rooms/MessageComposerFormatBar.tsx b/src/components/views/rooms/MessageComposerFormatBar.tsx
index 34798cc6089..0ab359d9ddd 100644
--- a/src/components/views/rooms/MessageComposerFormatBar.tsx
+++ b/src/components/views/rooms/MessageComposerFormatBar.tsx
@@ -33,6 +33,12 @@ interface IState {
 
 export default class MessageComposerFormatBar extends React.PureComponent<IProps, IState> {
     private readonly formatBarRef = createRef<HTMLDivElement>();
+    /**
+     * The height of the format bar in pixels.
+     * Height 32px + 2px border
+     * @private
+     */
+    private readonly BAR_HEIGHT = 34;
 
     public constructor(props: IProps) {
         super(props);
@@ -96,7 +102,7 @@ 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`;
-        const halfBarHeight = this.formatBarRef.current.clientHeight / 2; // used to center the bar
+        const halfBarHeight = this.BAR_HEIGHT / 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);