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,30 +222,36 @@ export default function HomePage() {
         }`}
     >
       {/* AI Toolbar */}
-      <div className="flex flex-wrap gap-2 mb-4 items-center">
-        <Input
-          className="flex-1"
-          placeholder='Describe event for AI to create'
-          value={aiPrompt}
-          onChange={e => setAiPrompt(e.target.value)}
-        />
-        <Button onClick={handleAiCreate} disabled={aiLoading}>
-          {aiLoading ? 'Thinking...' : 'AI Create'}
-        </Button>
-        <Button variant="secondary" onClick={handleAiSummarize} disabled={aiLoading}>
-          {aiLoading ? 'Summarizing...' : 'AI Summarize'}
-        </Button>
+      <div className="flex flex-row gap-4 mb-4 items-start">
+        <div className='w-full'>
+          <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>
+          <Button variant="secondary" onClick={handleAiSummarize} disabled={aiLoading}>
+            {aiLoading ? 'Summarizing...' : 'AI Summarize'}
+          </Button>
+        </div>
       </div>
 
       {/* Summary Panel */}
-      {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>
-      )}
+      {
+        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 }