From 27376f3931d5b88384e4226c0a130bbabd9f386b Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Thu, 6 Oct 2022 10:31:48 +0200
Subject: [PATCH 1/2] 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 3258ce51afb..bc3a64460df 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;
+        this.formatBarRef.current.style.top = `max(${selectionRect.top - parentRect.top - offsetLimit}px,
+        ${-offsetLimit}px)`;
     }
 
     public hide(): void {

From c298d0080c6b585a0245a603025b6f04056f30ed Mon Sep 17 00:00:00 2001
From: owi92 <94838646+owi92@users.noreply.github.com>
Date: Thu, 6 Oct 2022 17:42:13 +0200
Subject: [PATCH 2/2] Update
 src/components/views/rooms/MessageComposerFormatBar.tsx

Co-authored-by: Janne Mareike Koschinski <janne@kuschku.de>
---
 src/components/views/rooms/MessageComposerFormatBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/MessageComposerFormatBar.tsx b/src/components/views/rooms/MessageComposerFormatBar.tsx
index bc3a64460df..e8fa773edeb 100644
--- a/src/components/views/rooms/MessageComposerFormatBar.tsx
+++ b/src/components/views/rooms/MessageComposerFormatBar.tsx
@@ -69,8 +69,8 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
         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;
-        this.formatBarRef.current.style.top = `max(${selectionRect.top - parentRect.top - offsetLimit}px,
-        ${-offsetLimit}px)`;
+        const position = Math.max(selectionRect.top - parentRect.top - offsetLimit, -offsetLimit);
+        this.formatBarRef.current.style.top = `${position}px`;
     }
 
     public hide(): void {