Limit formatting bar offset to top of composer (#9365)

* Limit formatting bar offset to top of composer

When highlighting larger sections in the composer, the formatting bar
would scroll up and cover a previous post. This commit makes sure
the bar's offset will be limited to the top of the composer.

It should also make the code slightly more maintainable by getting the bar height
from the DOMrect and basing the offset on that height instead of hardcoding it.

Resolves: #12359

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 {