fix: icon dropdown shifts layout for suggestions (#9898)

* Fix:Icon dropdown shifts layout when suggestions are shown * same changes for milestone page --------- Co-authored-by: Eddie Jaoude <[email protected]>
EddieHubCommunity · Jan 21, 2024 · 5f86013 · 5f86013
1 parent 75388fb
commit 5f86013
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/components/IconSearch.js b/components/IconSearch.js
@@ -29,7 +29,7 @@ function IconSearch({ selectedIcon, handleSelectedIcon }) {
         className={`border-2 transition-all duration-250 ease-linear rounded px-6 py-2 mb-2 block w-full dark:bg-primary-high hover:border-tertiary-medium focus:ring-0 focus:border-tertiary-medium focus:outline-0`}
       />
       <Combobox.Options
-        className={`border-2 rounded border-tertiary-medium dark:bg-primary-medium`}
+        className={`absolute z-10 w-full border-2 rounded border-tertiary-medium dark:bg-primary-medium`}
       >
         {filteredIcon.map((icon) => {
           const Icon = getIcon(icon);

diff --git a/pages/account/manage/link/[[...data]].js b/pages/account/manage/link/[[...data]].js
@@ -230,7 +230,7 @@ export default function ManageLink({ BASE_URL, username, link, groups }) {
                       For example: <i>Follow me on Twitter</i>
                     </p>
                   </div>
-                  <div className="mt-1 sm:col-span-2 sm:mt-0">
+                  <div className="relative mt-1 sm:col-span-2 sm:mt-0">
                     <IconSearch
                       handleSelectedIcon={setIcon}
                       selectedIcon={icon}

diff --git a/pages/account/manage/milestone/[[...data]].js b/pages/account/manage/milestone/[[...data]].js
@@ -249,7 +249,7 @@ export default function ManageMilestone({ BASE_URL, milestone }) {
                       onChange={(e) => setdateFormat(e.target.value)}
                     />
                   </div>
-                  <div className="mt-1 sm:col-span-2 sm:mt-0">
+                  <div className="relative mt-1 sm:col-span-2 sm:mt-0">
                     <IconSearch
                       handleSelectedIcon={setIcon}
                       selectedIcon={icon}