use textarea instead of input for ai prompt

src/app/page.tsx

@@ -12,6 +12,7 @@ import { IcsFilePicker } from '@/components/ics-file-picker'
 import { addEvent, deleteEvent, getAllEvents, clearEvents, getDB } from '@/lib/db'
 import { parseICS, generateICS } from '@/lib/ical'
 import type { CalendarEvent } from '@/lib/types'
+import { Textarea } from '@/components/ui/textarea'
 
 export default function HomePage() {
   const [events, setEvents] = useState<CalendarEvent[]>([])
@@ -221,13 +222,16 @@ export default function HomePage() {
         }`}
     >
       {/* AI Toolbar */}
-      <div className="flex flex-wrap gap-2 mb-4 items-center">
+      <div className="flex flex-row gap-4 mb-4 items-start">
-        <Input
+        <div className='w-full'>
-          className="flex-1"
+          <Textarea
+            className="wrap-anywhere min-h-12"
             placeholder='Describe event for AI to create'
             value={aiPrompt}
             onChange={e => setAiPrompt(e.target.value)}
           />
+        </div>
+        <div className='flex flex-row gap-2 pt-1.5'>
           <Button onClick={handleAiCreate} disabled={aiLoading}>
             {aiLoading ? 'Thinking...' : 'AI Create'}
           </Button>
@@ -235,16 +239,19 @@ export default function HomePage() {
             {aiLoading ? 'Summarizing...' : 'AI Summarize'}
           </Button>
         </div>
+      </div>
 
       {/* Summary Panel */}
-      {summary && (
+      {
+        summary && (
           <Card className="p-4 mb-4 bg-gray-50 border border-gray-200">
             <div className="text-sm text-gray-500 mb-1">
               Summary updated {summaryUpdated}
             </div>
             <div>{summary}</div>
           </Card>
-      )}
+        )
+      }
 
       {/* Control Toolbar */}
       <div className="flex flex-wrap gap-2 mb-4">
@@ -327,6 +334,6 @@ export default function HomePage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </div >
   )
 }

src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }