does it work now

app/input.tsx

@@ -82,7 +82,7 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
         if (transcriber.isComplete) {
             handleTranscriptionComplete();
         }
-    }, [transcriber.isComplete]);
+    }, [transcriber]);
 
     useEffect(() => {
         if (recognizedText) {

app/page.module.css

@@ -295,10 +295,28 @@
 }
 
 .messages {
-  flex: 1;
-  border: 8px solid transparent;
-  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end; /* Aligns messages to the bottom */
+  max-height: 80vh; /* Adjust the percentage as needed */
+  overflow-y: auto; /* Allows scrolling if content exceeds container height */
   padding: 25px;
+  border-radius: 10px;
+  margin-bottom: 10px; /* Space between chat container and input field */
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .messages {
+    max-height: 70vh; /* More space for smaller screens */
+  }
+}
+
+/* Further adjustments can be made for smaller screens */
+@media (max-width: 480px) {
+  .messages {
+    max-height: 60vh;
+  }
 }
 
 .message {