autoresize textfield with content & minor ui tweaks

src/app/page.tsx

@@ -236,13 +236,15 @@ export default function HomePage() {
           <div className="flex flex-col sm:flex-row gap-4 mb-4 items-start">
             <div className='w-full'>
               <Textarea
-                className="wrap-anywhere min-h-12"
+                className="wrap-anywhere field-sizing-content resize-none w-full min-h-[2.5rem] max-h-64 overflow-y-auto sm:overflow-y-visible px-3 py-2 scroll-p-8 placeholder:italic"
+                // Band-aid for scrollbar clipping out of the box
+                style={{ clipPath: "inset(0 round 1rem)" }}
                 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'>
+            <div className='flex flex-row gap-2 pt-1'>
               <Button onClick={handleAiCreate} disabled={aiLoading}>
                 {aiLoading ? 'Thinking...' : 'AI Create'}
               </Button>