From dde88bca26bff995d058011f5e5ecd8148dd2160 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 30 Jan 2024 09:29:44 -0800
Subject: [PATCH] Styling tweaks to search widget suggestions

---
 src/components/widgets/search/search.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/widgets/search/search.jsx b/src/components/widgets/search/search.jsx
index 414f38fc..7927782d 100644
--- a/src/components/widgets/search/search.jsx
+++ b/src/components/widgets/search/search.jsx
@@ -146,7 +146,7 @@ export default function Search({ options }) {
   return (
     <ContainerForm options={options} additionalClassNames="grow information-widget-search">
       <Raw>
-        <div className="flex-col relative h-8 my-4 min-w-fit">
+        <div className="flex-col relative h-8 my-4 min-w-fit z-50">
           <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
           <Combobox value={query} onChange={submitCallback}>
             <Combobox.Input
@@ -226,8 +226,8 @@ export default function Search({ options }) {
             </Listbox>
 
             {searchSuggestions[1]?.length > 0 && (
-              <Combobox.Options className="mt-2 rounded-md bg-theme-50 dark:bg-theme-800 border border-theme-300 dark:border-theme-200/50 cursor-pointer">
-                <div className="px-2 py-1 bg-white/50 dark:bg-white/10 text-theme-900 dark:text-white">
+              <Combobox.Options className="mt-1 rounded-md bg-theme-50 dark:bg-theme-800 border border-theme-300 dark:border-theme-200/30 cursor-pointer shadow-lg">
+                <div className="p-1 bg-white/50 dark:bg-white/10 text-theme-900/90 dark:text-white/90 text-xs">
                   <Combobox.Option key={query} value={query} />
 
                   {searchSuggestions[1].map((suggestion) => (
@@ -235,7 +235,7 @@ export default function Search({ options }) {
                       {({ active }) => (
                         <span
                           className={classNames(
-                            "px-1 rounded-md w-full",
+                            "px-2 py-1 rounded-md w-full",
                             active ? "bg-theme-300/20 dark:bg-white/10" : "",
                           )}
                         >