From 2d0da9dbeb381a72a83c7367d43e6d8e24b6f18b Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Wed, 20 Aug 2025 12:22:38 -0400
Subject: [PATCH] autoresize textfield with content & minor ui tweaks

---
 src/app/page.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4ec5e7c..ab86a2e 100644
--- a/src/app/page.tsx
+++ b/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>