From eb929f9e874efd1147876631180e3586d44cfc0a Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Wed, 19 May 2021 16:17:49 -0300
Subject: [PATCH] fix: avoid tag menu opening behind footer

---
 .../javascripts/components/NotesOptions.tsx   | 48 +++++++++++--------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
index ebc0bdec5..aa64a655e 100644
--- a/app/assets/javascripts/components/NotesOptions.tsx
+++ b/app/assets/javascripts/components/NotesOptions.tsx
@@ -58,6 +58,32 @@ export const NotesOptions = observer(
       }
     }, [tagsMenuOpen, onSubmenuChange]);
 
+    const openTagsMenu = () => {
+      const defaultFontSize = window.getComputedStyle(
+        document.documentElement
+      ).fontSize;
+      const maxTagsMenuSize = parseFloat(defaultFontSize) * 20;
+      const { clientWidth, clientHeight } = document.body;
+      const buttonRect = tagsButtonRef.current.getBoundingClientRect();
+      const { offsetTop, offsetWidth } = tagsButtonRef.current;
+      const footerHeight = 32;
+
+      if (buttonRect.top + maxTagsMenuSize > clientHeight) {
+        setTagsMenuMaxHeight(clientHeight - buttonRect.top - footerHeight - 2);
+      }
+
+      setTagsMenuPosition({
+        top: offsetTop,
+        right:
+          buttonRect.right + maxTagsMenuSize >
+          clientWidth
+            ? offsetWidth
+            : -offsetWidth,
+      });
+
+      setTagsMenuOpen(!tagsMenuOpen);
+    };
+
     return (
       <>
         <Switch
@@ -103,27 +129,7 @@ export const NotesOptions = observer(
         {appState.tags.tagsCount > 0 && (
           <Disclosure
             open={tagsMenuOpen}
-            onChange={() => {
-              const defaultFontSize = window.getComputedStyle(
-                document.documentElement
-              ).fontSize;
-              const maxTagsMenuSize = parseFloat(defaultFontSize) * 20;
-              const { clientWidth, clientHeight } = document.body;
-              const buttonRect = tagsButtonRef.current.getBoundingClientRect();
-              const { offsetTop, offsetWidth } = tagsButtonRef.current;
-              if (buttonRect.top + maxTagsMenuSize > clientHeight) {
-                setTagsMenuMaxHeight(clientHeight - buttonRect.top);
-              }
-              setTagsMenuPosition({
-                top: offsetTop,
-                right:
-                  buttonRect.right + maxTagsMenuSize >
-                  clientWidth
-                    ? offsetWidth
-                    : -offsetWidth,
-              });
-              setTagsMenuOpen(!tagsMenuOpen);
-            }}
+            onChange={openTagsMenu}
           >
             <DisclosureButton
               onKeyUp={(event) => {