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 >
   )
 }