Merge pull request #218 from Trynax/fix/input-overlay-messages

fix: input overlay covering messages

Author: jasonhedman

src/app/(general)/_components/chat/chat.tsx

@@ -12,6 +12,7 @@ import { Logo } from "@/components/ui/logo";
 import { useSearchParams } from "next/navigation";
 import { WelcomeDialog } from "../welcome-dialog";
 import { Anvil } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 export const ChatContent = ({
   id,
@@ -40,7 +41,7 @@ export const ChatContent = ({
   return (
     <>
       <div className="bg-background relative flex h-full min-w-0 flex-col">
-        {/* Messages - always shown */}
+        {/* Messages - flex-1 to take available space */}
         <Messages
           chatId={id}
           isReadonly={isReadonly}
@@ -51,7 +52,7 @@ export const ChatContent = ({
           scrollToBottom={scrollToBottom}
         />
 
-        {/* Input Container - absolutely positioned, contains greeting, input, and starter prompts */}
+        {/* Input Container - normal flow no absolute positioning */}
         <motion.div
           initial={hasInitialMessages ? { y: 0 } : { y: "calc(-50vh + 50%)" }}
           animate={
@@ -64,7 +65,14 @@ export const ChatContent = ({
             ease: "easeInOut",
             duration: 0.4,
           }}
-          className="absolute bottom-4 left-1/2 h-fit w-full max-w-3xl -translate-x-1/2 px-4"
+          className={cn(
+            "w-full px-4 pb-4",
+
+            !hasMessages &&
+              !hasInitialMessages &&
+              "absolute bottom-4 left-1/2 max-w-3xl -translate-x-1/2",
+            (hasMessages || hasInitialMessages) && "mx-auto max-w-3xl",
+          )}
         >
           {/* Greeting - only shown when no messages */}
           <AnimatePresence>

src/app/(general)/_components/chat/input/index.tsx

@@ -77,7 +77,18 @@ const PureMultimodalInput: React.FC<Props> = ({
   const adjustHeight = () => {
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
-      textareaRef.current.style.height = `${textareaRef.current.scrollHeight + 2}px`;
+
+      const maxHeight = Math.min(
+        window.innerHeight * 0.35 - 32,
+        textareaRef.current.scrollHeight + 2,
+      );
+      if (textareaRef.current.scrollHeight + 2 <= maxHeight) {
+        textareaRef.current.style.height = `${textareaRef.current.scrollHeight + 2}px`;
+        textareaRef.current.style.overflowY = "hidden";
+      } else {
+        textareaRef.current.style.height = `${maxHeight}px`;
+        textareaRef.current.style.overflowY = "auto";
+      }
     }
   };
 
@@ -417,7 +428,7 @@ const PureMultimodalInput: React.FC<Props> = ({
           value={input}
           onChange={handleInput}
           className={cn(
-            "h-auto max-h-[calc(75dvh-4rem)] min-h-[48px] resize-none overflow-hidden border-0 bg-transparent px-4 py-3 !text-base shadow-none focus-visible:ring-0 dark:bg-transparent",
+            "h-auto max-h-[calc(35dvh-2rem)] min-h-[48px] resize-none overflow-y-auto border-0 bg-transparent px-4 py-3 !text-base shadow-none focus-visible:ring-0 dark:bg-transparent",
             className,
           )}
           rows={2}

src/app/(general)/_components/chat/messages/index.tsx

@@ -50,7 +50,6 @@ const PureMessages: React.FC<Props> = ({
       ref={containerRef}
       className={cn(
         "relative flex h-full min-w-0 flex-1 flex-col gap-6 overflow-y-scroll py-8",
-        messages.length > 0 && "mb-20",
       )}
     >
       {messages