From d6f016bd8cdb73bb7db00f8a550850ff92a41d05 Mon Sep 17 00:00:00 2001
From: Tingwei Xie <50038156+tix980@users.noreply.github.com>
Date: Sat, 2 Mar 2024 08:23:28 -0500
Subject: [PATCH] fix : groups dropdown suggestions shift layout (#10163)
 (#10210)

* FIX : [BUG] groups field dropdown shift layout while suggestions are shown #10163

* Fixed the Issue The group drop-down suggestions are not visible properly

* Fixed the Issue The group drop-down suggestions are not visible properly

---------

Co-authored-by: Priyanshu kumawat <88786642+kumarsonsoff3@users.noreply.github.com>
---
 components/GroupLinkSearch.js            | 4 ++--
 pages/account/manage/link/[[...data]].js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/GroupLinkSearch.js b/components/GroupLinkSearch.js
index cdd95e10a8b..4821ec681a7 100644
--- a/components/GroupLinkSearch.js
+++ b/components/GroupLinkSearch.js
@@ -35,7 +35,7 @@ function GroupLinkSearch({ selectedGroup, handleGroupSelection, groups }) {
       />
       <Combobox.Options
         className={
-          "border-2 rounded border-tertiary-medium dark:bg-primary-medium"
+          "absolute z-10 w-full border-2 rounded border-tertiary-medium dark:bg-primary-medium"
         }
       >
         {filteredGroup.length > 0 &&
@@ -45,7 +45,7 @@ function GroupLinkSearch({ selectedGroup, handleGroupSelection, groups }) {
                 key={group}
                 value={group}
                 className={
-                  "px-3 py-2 flex items-center dark:hover:bg-tertiary-medium/60 hover:bg-secondary-low/40"
+                  "px-3 py-2 flex items-center bg-white dark:bg-primary-medium dark:hover:bg-tertiary-medium/60 hover:bg-secondary-low/100"
                 }
               >
                 {group !== "" && <span>{group}</span>}
diff --git a/pages/account/manage/link/[[...data]].js b/pages/account/manage/link/[[...data]].js
index 714b38c0faf..210fa964108 100644
--- a/pages/account/manage/link/[[...data]].js
+++ b/pages/account/manage/link/[[...data]].js
@@ -182,7 +182,7 @@ export default function ManageLink({ BASE_URL, username, link, groups }) {
                 </div>
 
                 <div className="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-primary-low-medium/30 sm:pt-5">
-                  <div className="mt-1 sm:col-span-2 sm:mt-0">
+                  <div className="relative mt-1 sm:col-span-2 sm:mt-0">
                     <GroupLinkSearch
                       groups={groups}
                       handleGroupSelection={setGroup}