Use text area

web/src/components/overlay/SearchDetailDialog.tsx

@@ -8,10 +8,10 @@ import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import { getIconForLabel } from "@/utils/iconUtil";
 import { useApiHost } from "@/api";
 import { Button } from "../ui/button";
-import { Input } from "../ui/input";
 import { useCallback, useEffect, useState } from "react";
 import axios from "axios";
 import { toast } from "sonner";
+import { Textarea } from "../ui/textarea";
 
 type SearchDetailDialogProps = {
   search?: SearchResult;
@@ -147,7 +147,8 @@ export default function SearchDetailDialog({
             </div>
             <div className="flex flex-col gap-1.5">
               <div className="text-sm text-primary/40">Description</div>
-              <Input
+              <Textarea
+                className="md:h-64"
                 placeholder="Description of the event"
                 value={desc}
                 onChange={(e) => setDesc(e.target.value)}

web/src/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }