fix: Fix end icon in smart list input overlapping with text. Fixes #1379

3 files changed, 15 insertions, 17 deletions

diff --git a/apps/web/components/dashboard/lists/EditListModal.tsx b/apps/web/components/dashboard/lists/EditListModal.tsx
index 68d32b0a..7a750c33 100644
--- a/apps/web/components/dashboard/lists/EditListModal.tsx
+++ b/apps/web/components/dashboard/lists/EditListModal.tsx
@@ -358,14 +358,16 @@ export function EditListModal({
                             value={field.value}
                             onChange={field.onChange}
                             placeholder={t("lists.search_query")}
+                            endIcon={
+                              parsedSearchQuery ? (
+                                <QueryExplainerTooltip
+                                  className="stroke-foreground p-1"
+                                  parsedSearchQuery={parsedSearchQuery}
+                                />
+                              ) : undefined
+                            }
                           />
                         </FormControl>
-                        {parsedSearchQuery && (
-                          <QueryExplainerTooltip
-                            className="translate-1/2 absolute right-1.5 top-2 stroke-foreground p-0.5"
-                            parsedSearchQuery={parsedSearchQuery}
-                          />
-                        )}
                       </div>
                       <FormDescription>
                         <Link
diff --git a/apps/web/components/dashboard/search/SearchInput.tsx b/apps/web/components/dashboard/search/SearchInput.tsx
index c58542bf..e60c460c 100644
--- a/apps/web/components/dashboard/search/SearchInput.tsx
+++ b/apps/web/components/dashboard/search/SearchInput.tsx
@@ -100,7 +100,7 @@ const SearchInput = React.forwardRef<
           </Button>
         )}
       <Input
-        startIcon={SearchIcon}
+        startIcon={<SearchIcon size={18} className="text-muted-foreground" />}
         ref={inputRef}
         value={value}
         onChange={onChange}
diff --git a/apps/web/components/ui/input.tsx b/apps/web/components/ui/input.tsx
index 09f9def9..66cd1108 100644
--- a/apps/web/components/ui/input.tsx
+++ b/apps/web/components/ui/input.tsx
@@ -1,23 +1,19 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
-import { LucideIcon } from "lucide-react";
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
-  startIcon?: LucideIcon;
-  endIcon?: LucideIcon;
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, startIcon, endIcon, ...props }, ref) => {
-    const StartIcon = startIcon;
-    const EndIcon = endIcon;
-
     return (
       <div className="relative w-full">
-        {StartIcon && (
+        {startIcon && (
           <div className="absolute left-2 top-1/2 -translate-y-1/2 transform">
-            <StartIcon size={18} className="text-muted-foreground" />
+            {startIcon}
           </div>
         )}
         <input
@@ -31,9 +27,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           ref={ref}
           {...props}
         />
-        {EndIcon && (
+        {endIcon && (
           <div className="absolute right-3 top-1/2 -translate-y-1/2 transform">
-            <EndIcon className="text-muted-foreground" size={18} />
+            {endIcon}
           </div>
         )}
       </div>