refine ui further

components/HeroInput.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, KeyboardEvent } from "react";
+import { useState, KeyboardEvent, useEffect, useRef } from "react";
 
 interface HeroInputProps {
   value: string;
@@ -18,6 +18,15 @@ export default function HeroInput({
   className = ""
 }: HeroInputProps) {
   const [isFocused, setIsFocused] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Reset textarea height when value changes (especially when cleared)
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
+    }
+  }, [value]);
 
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === "Enter" && !e.shiftKey) {
@@ -52,6 +61,7 @@ export default function HeroInput({
           </div>
 
           <textarea
+            ref={textareaRef}
             className="w-full bg-transparent text-body-input text-accent-black placeholder:text-black-alpha-48 resize-none outline-none min-h-[24px] leading-6"
             placeholder={placeholder}
             value={value}

components/app/generation/SidebarInput.tsx

@@ -55,12 +55,10 @@ export default function SidebarInput({ onSubmit, disabled = false }: SidebarInpu
 
   return (
     <div className="w-full">
-      <div className="bg-white rounded-20 border border-gray-200 shadow-sm">
+      <div >
         <div className="p-4 border-b border-gray-100">
-          <h3 className="text-sm font-medium text-gray-900 mb-3">Generate New Website</h3>
-          
           {/* URL Input */}
-          <div className="flex gap-3 items-center mb-3">
+          <div className="flex gap-3 items-center">
             <Globe />
             <input
               className="flex-1 bg-transparent text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none"