From bb6954bfb6f196e1e45b1e03a55759ed5e1db6c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ian=20Louren=C3=A7o?= <ianlourenco@protonmail.com>
Date: Mon, 4 Mar 2024 16:47:32 -0300
Subject: [PATCH] Fix: visual glitch with autocomplete component (#20611)

* fix: add display:block style to span and correct minor typo

* refactor: change posisiton and max-heigh on scss

* refactor: adapt message with conditional

---------

Co-authored-by: Mac Siri <mac@forem.com>
---
 app/assets/stylesheets/components/autocomplete.scss         | 4 ++--
 .../MultiSelectAutocomplete/MultiSelectAutocomplete.jsx     | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/components/autocomplete.scss b/app/assets/stylesheets/components/autocomplete.scss
index a1ba6448a..04f7eca1d 100644
--- a/app/assets/stylesheets/components/autocomplete.scss
+++ b/app/assets/stylesheets/components/autocomplete.scss
@@ -83,8 +83,8 @@
   }
 
   .c-autocomplete--multi__popover {
-    position: absolute;
-    max-height: 500px;
+    position: relative;
+    max-height: 200px;
     overflow: auto;
     width: 100%;
     padding: var(--su-1);
diff --git a/app/javascript/crayons/MultiSelectAutocomplete/MultiSelectAutocomplete.jsx b/app/javascript/crayons/MultiSelectAutocomplete/MultiSelectAutocomplete.jsx
index 7a9db2f5b..c39533b9c 100644
--- a/app/javascript/crayons/MultiSelectAutocomplete/MultiSelectAutocomplete.jsx
+++ b/app/javascript/crayons/MultiSelectAutocomplete/MultiSelectAutocomplete.jsx
@@ -649,9 +649,9 @@ export const MultiSelectAutocomplete = ({
           </ul>
         </div>
         {showMaxSelectionsReached ? (
-          <div className="c-autocomplete--multi__popover">
-            <span className="p-3">Only {maxSelections} selections allowed</span>
-          </div>
+          <span className="p-3">
+            {`Only ${maxSelections} ${maxSelections == 1 ? 'selection' : 'selections'} allowed`}
+          </span>
         ) : null}
         {suggestions.length > 0 && allowSelections ? (
           <div className="c-autocomplete--multi__popover" ref={popoverRef}>