chat hat eigene Scrollbar

math-tutor/frontend/src/components/Chat/MessageInput.tsx

@@ -34,6 +34,12 @@ export default function MessageInput({
         rows={3}
         value={value}
         onChange={(event) => onChange(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" && event.ctrlKey) {
+            event.preventDefault();
+            onSend();
+          }
+        }}
       />
     </div>
   );

math-tutor/frontend/src/pages/App.tsx

@@ -31,7 +31,7 @@ const mockDocs: RetrievedDoc[] = [
 export default function App() {
   const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);
   const [draft, setDraft] = useState("");
-  const [isCanvasVisible, setIsCanvasVisible] = useState(true);
+  const [isCanvasVisible, setIsCanvasVisible] = useState(false);
 
   const handleSend = async () => {
     const trimmed = draft.trim();

math-tutor/frontend/src/styles/theme.css

@@ -13,10 +13,16 @@ body {
   margin: 0;
 }
 
-.app-shell {
+#root {
   min-height: 100vh;
+}
+
+.app-shell {
+  height: 100vh;
   padding: 24px;
   background: radial-gradient(circle at top left, #fff7e6, #f4f1ea);
+  display: flex;
+  flex-direction: column;
 }
 
 .app-header {
@@ -73,12 +79,16 @@ body {
   display: grid;
   grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
   gap: 24px;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .chat-column {
   display: flex;
   flex-direction: column;
   gap: 16px;
+  min-height: 0;
 }
 
 .chat-window {
@@ -89,7 +99,8 @@ body {
   display: flex;
   flex-direction: column;
   gap: 16px;
-  min-height: 420px;
+  min-height: 0;
+  flex: 1;
 }
 
 .chat-title {
@@ -102,6 +113,7 @@ body {
   flex-direction: column;
   gap: 12px;
   overflow-y: auto;
+  min-height: 0;
 }
 
 .message-bubble {
@@ -135,6 +147,10 @@ body {
   flex-wrap: wrap;
 }
 
+.composer-row .btn.primary {
+  margin-left: auto;
+}
+
 .composer-input {
   width: 100%;
   resize: vertical;