Refactor ChatInputArea to support dynamic height adjustment and update styles for improved layout consistency.

Author: rstropek

workshop-ui/src/app/chat/[exercise]/page.module.css

@@ -166,10 +166,6 @@
   transform: translateX(-50%);
   width: calc(100% - 40px);
   max-width: 760px;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  padding: 0;
 }
 
 .loader {

workshop-ui/src/app/chat/[exercise]/page.tsx

@@ -382,7 +382,7 @@ export default function Home() {
 
       {/* Input Area */}
       <div className={styles.inputAreaContainer} style={{ height: `${inputAreaHeight}px` }}>
-        <ChatInputArea inputRef={inputRef} inputValue={input} setInputValue={setInput} onSubmit={handleSubmit} isLoading={isLoading} messageCount={messages.length} />
+        <ChatInputArea inputRef={inputRef} inputValue={input} setInputValue={setInput} onSubmit={handleSubmit} isLoading={isLoading} messageCount={messages.length} fillContainer={true} />
       </div>
     </div>
   );

workshop-ui/src/components/chat/ChatInputArea.module.css

@@ -1,10 +1,13 @@
 .wrapper {
     display: flex;
     flex-direction: column;
-    height: 100%;
     gap: 10px;
 }
 
+.fillContainer {
+    height: 100%;
+}
+
 .inputForm {
     display: flex;
     gap: 10px;

workshop-ui/src/components/chat/ChatInputArea.tsx

@@ -10,6 +10,7 @@ interface ChatInputAreaProps {
     onSubmit: (e: React.FormEvent) => void;
     isLoading: boolean;
     messageCount: number;
+    fillContainer?: boolean;
 }
 
 export default function ChatInputArea({
@@ -18,7 +19,8 @@ export default function ChatInputArea({
     setInputValue,
     onSubmit,
     isLoading,
-    messageCount
+    messageCount,
+    fillContainer = false
 }: Readonly<ChatInputAreaProps>) {
 
     const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -28,7 +30,7 @@ export default function ChatInputArea({
         }
     };
     return (
-        <div className={styles.wrapper}>
+        <div className={`${styles.wrapper} ${fillContainer ? styles.fillContainer : ''}`}>
             <form onSubmit={onSubmit} className={styles.inputForm}>
                 <textarea
                     ref={inputRef}