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

@@ -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>}

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}