From d705c864ba69dc0eebe45aa628e714acc8b1b58c Mon Sep 17 00:00:00 2001
From: owi92 <94838646+owi92@users.noreply.github.com>
Date: Fri, 18 Nov 2022 14:28:11 +0100
Subject: [PATCH] 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 | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

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 {