From f7bc9e0b0ac0d10435e0a3e458cd5795918b2144 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Wed, 26 May 2021 16:31:53 -0300
Subject: [PATCH] feat: make hint fixed on bottom of dropdown

---
 .../components/AutocompleteTagInput.tsx       | 58 ++++++++++---------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
index cfce139d2..d4469d64c 100644
--- a/app/assets/javascripts/components/AutocompleteTagInput.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -97,36 +97,38 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
         {dropdownVisible && (
           <DisclosurePanel
             ref={dropdownRef}
-            className="sn-dropdown flex flex-col py-2 overflow-y-scroll absolute"
+            className="sn-dropdown flex flex-col py-2 absolute"
             style={{ maxHeight: dropdownMaxHeight }}
           >
-            {tagResults.map((tag) => {
-              return (
-                <button
-                  key={tag.uuid}
-                  type="button"
-                  className="sn-dropdown-item"
-                  onClick={() => onTagOptionClick(tag)}
-                  onBlur={closeOnBlur}
-                >
-                  <Icon type="hashtag" className="color-neutral mr-2" />
-                  {tag.title
-                    .split(new RegExp(`(${searchQuery})`, 'gi'))
-                    .map((substring, index) => (
-                      <span
-                        key={index}
-                        className={
-                          substring.toLowerCase() === searchQuery.toLowerCase()
-                            ? 'font-bold whitespace-pre-wrap'
-                            : 'whitespace-pre-wrap'
-                        }
-                      >
-                        {substring}
-                      </span>
-                    ))}
-                </button>
-              );
-            })}
+            <div className="overflow-y-scroll">
+              {tagResults.map((tag) => {
+                return (
+                  <button
+                    key={tag.uuid}
+                    type="button"
+                    className="sn-dropdown-item"
+                    onClick={() => onTagOptionClick(tag)}
+                    onBlur={closeOnBlur}
+                  >
+                    <Icon type="hashtag" className="color-neutral mr-2" />
+                    {tag.title
+                      .split(new RegExp(`(${searchQuery})`, 'gi'))
+                      .map((substring, index) => (
+                        <span
+                          key={index}
+                          className={
+                            substring.toLowerCase() === searchQuery.toLowerCase()
+                              ? 'font-bold whitespace-pre-wrap'
+                              : 'whitespace-pre-wrap'
+                          }
+                        >
+                          {substring}
+                        </span>
+                      ))}
+                  </button>
+                );
+              })}
+            </div>
             {hintVisible && (
               <>
                 {tagResults.length > 0 && (