From 2b4ce627b8a8e3715293d4e5c18f4bd12c313efa Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 29 Nov 2024 12:56:52 +0100
Subject: [PATCH] Fix format bar position (#28591)

---
 src/components/views/rooms/MessageComposerFormatBar.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/views/rooms/MessageComposerFormatBar.tsx b/src/components/views/rooms/MessageComposerFormatBar.tsx
index 34798cc608..0ab359d9dd 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);