From c527299bbff6b4b690579c38f801f8a4d3b47f7d Mon Sep 17 00:00:00 2001
From: nickschneider <n.schneider@tum.de>
Date: Sun, 24 Nov 2024 20:04:10 +0100
Subject: [PATCH] heigth 100%

---
 src/app/chat/chat.component.scss | 306 ++++++++++++++++---------------
 1 file changed, 155 insertions(+), 151 deletions(-)

diff --git a/src/app/chat/chat.component.scss b/src/app/chat/chat.component.scss
index d745164..f6c4f28 100644
--- a/src/app/chat/chat.component.scss
+++ b/src/app/chat/chat.component.scss
@@ -7,178 +7,182 @@ $system-message-color: #64a0c8;
 $user-message-color: #0a2d57;
 $background-color: #f4f4f4;
 $border-color: #ccc;
-$chat-height: 640px;
+$chat-height: 100%;
 $chat-width: 100%;
 $header-height: 40px;
 $logo-size: 40px;
 
 .chat-container {
-    font-family: roboto, sans-serif;
+  font-family: roboto, sans-serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: $chat-width;
+  height: $chat-height;
+  border: 1px solid $border-color;
+  background-color: $background-color;
+  border-radius: 8px;
+  overflow: hidden;
+
+  .chat-header {
     display: flex;
-    flex-direction: column;
     justify-content: space-between;
-    width: $chat-width;
-    height: $chat-height;
-    border: 1px solid $border-color;
-    background-color: $background-color;
-    border-radius: 8px;
-    overflow: hidden;
-
-    .chat-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background-color: $primary-color;
-        color: white;
-        padding: 8px;
-        font-size: 14px;
-        height: $header-height;
-    }
+    align-items: center;
+    background-color: $primary-color;
+    color: white;
+    padding: 8px;
+    font-size: 14px;
+    height: $header-height;
+  }
+
+  .chat-logo {
+    width: $logo-size;
+    height: $logo-size;
+    object-fit: contain;
+  }
+
+  .chat-body {
+    flex: 1;
+    padding: 10px;
+    overflow-y: auto;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .message {
+    margin: 8px 0;
+    padding: 10px;
+    border-radius: 16px;
+    max-width: 70%;
+    word-wrap: break-word;
+    line-height: 1.5;
+    display: inline-block;
 
-    .chat-logo {
-        width: $logo-size;
-        height: $logo-size;
-        object-fit: contain;
+    &.system {
+      background-color: $tum-light-blue;
+      color: white;
+      align-self: flex-start;
+      border-top-left-radius: 0;
     }
 
-    .chat-body {
-        flex: 1;
-        padding: 10px;
-        overflow-y: auto;
-        background-color: white;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
+    &.user {
+      background-color: $tum-acordion-blue;
+      color: $tum-blue-dark;
+      align-self: flex-end;
+      border-top-right-radius: 0;
     }
+  }
 
-    .message {
-        margin: 8px 0;
-        padding: 10px;
-        border-radius: 16px;
-        max-width: 70%;
-        word-wrap: break-word;
-        line-height: 1.5;
-        display: inline-block;
-
-        &.system {
-            background-color: $tum-light-blue;
-            color: white;
-            align-self: flex-start;
-            border-top-left-radius: 0;
-        }
-
-        &.user {
-            background-color: $tum-acordion-blue;
-            color: $tum-blue-dark;
-            align-self: flex-end;
-            border-top-right-radius: 0;
-        }
+  .chat-footer {
+    display: flex;
+    padding: 10px;
+    background-color: $tum-acordion-blue;
+    border-top: 1px solid $border-color;
+
+    textarea {
+      box-sizing: border-box;
+      flex: 1;
+      padding: 10px;
+      border: 1px solid $border-color;
+      border-radius: 4px;
+      font-size: 14px;
+      line-height: 1.5;
+      resize: none;
+      overflow-y: hidden;
+      min-height: calc(1.5em * 1); // Minimum height for 1 line
+      max-height: calc(1.5em * 4); // Maximum height for 4 lines
     }
 
-    .chat-footer {
-        display: flex;
-        padding: 10px;
-        background-color: $tum-acordion-blue;
-        border-top: 1px solid $border-color;
-
-        textarea {
-            box-sizing: border-box;
-            flex: 1;
-            padding: 10px;
-            border: 1px solid $border-color;
-            border-radius: 4px;
-            font-size: 14px;
-            line-height: 1.5;
-            resize: none;
-            overflow-y: hidden;
-            min-height: calc(1.5em * 1); // Minimum height for 1 line
-            max-height: calc(1.5em * 4); // Maximum height for 4 lines
-        }
-
-        button {
-            background-color: $tum-light-blue;
-            color: white;
-            padding: 10px;
-            margin-left: 10px;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        
-            &:hover {
-                background-color: $primary-color;
-            }
-
-            &.disabled {
-                background-color: $border-color;
-                color: #aaa;
-                cursor: not-allowed;
-            }
-        
-            svg {
-                fill: white;
-                width: 20px;
-                height: 20px;
-            }
-        }
+    button {
+      background-color: $tum-light-blue;
+      color: white;
+      padding: 10px;
+      margin-left: 10px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        background-color: $primary-color;
+      }
+
+      &.disabled {
+        background-color: $border-color;
+        color: #aaa;
+        cursor: not-allowed;
+      }
+
+      svg {
+        fill: white;
+        width: 20px;
+        height: 20px;
+      }
     }
+  }
 }
 
 .dot-loader {
-    display: inline-flex;
-    gap: 4px;
-    background-color: $tum-light-blue; // Match the system message bubble color
-    color: white; // Text color within the bubble
-    padding: 10px;
-    border-radius: 16px;
-    align-self: flex-start;
-    border-top-left-radius: 0;
-  }
-  
-  .dot {
-    display: inline-block;
-    width: 5px;
-    height: 5px;
-    background-color: white; // Dot color matches text color
-    border-radius: 50%;
-    animation: dotBounce 1s infinite ease-in-out;
-  }
-  
-  .dot:nth-child(1) {
-    animation-delay: 0s;
-  }
-  
-  .dot:nth-child(2) {
-    animation-delay: 0.2s;
-  }
-  
-  .dot:nth-child(3) {
-    animation-delay: 0.4s;
+  display: inline-flex;
+  gap: 4px;
+  background-color: $tum-light-blue; // Match the system message bubble color
+  color: white; // Text color within the bubble
+  padding: 10px;
+  border-radius: 16px;
+  align-self: flex-start;
+  border-top-left-radius: 0;
+}
+
+.dot {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  background-color: white; // Dot color matches text color
+  border-radius: 50%;
+  animation: dotBounce 1s infinite ease-in-out;
+}
+
+.dot:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes dotBounce {
+
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+    opacity: 1;
   }
-  
-  @keyframes dotBounce {
-    0%, 80%, 100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-    40% {
-      transform: translateY(-2px);
-      opacity: 0.7;
-    }
+
+  40% {
+    transform: translateY(-2px);
+    opacity: 0.7;
   }
+}
 
 .study-program-dropdown {
-    box-sizing: border-box;
-    padding: 10px;
-    background-color: $tum-acordion-blue;
-    border-bottom: 1px solid $border-color;
-    color: $tum-blue-dark;
+  box-sizing: border-box;
+  padding: 10px;
+  background-color: $tum-acordion-blue;
+  border-bottom: 1px solid $border-color;
+  color: $tum-blue-dark;
 
-    .dropdown-label {
-        font-size: 14px;
-        font-weight: bold;
-        margin-bottom: 5px;
-    }
+  .dropdown-label {
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
 }
\ No newline at end of file