Merge pull request #31 from ls1intum/fix-document-upload-delete

Make chat layout more mobile friendly

Author: ninori9

.github/workflows/chatbot.yml

@@ -38,7 +38,7 @@ jobs:
             organisation: 2,
             filterByOrg: true,
             chatbotUrl: 'https://chatbot.ase.cit.tum.de/chat',
-            loginRequired: false
+            loginRequired: true
           };" > chatbot-ui/src/environments/environment.prod.ts
 
       - name: Build & Push (Org 2)

chatbot-ui/src/app/chat/chat.component.scss

@@ -141,6 +141,9 @@ $logo-size: 40px;
       display: flex;
       flex-direction: column; // Keeps warning below input field
       padding: 10px;
+      position: sticky;
+      bottom: 0;
+      z-index: 5;
       background-color: $tum-acordion-blue;
       border-top: 1px solid $border-color;
 
@@ -212,7 +215,6 @@ $logo-size: 40px;
         align-items: center;
         justify-content: space-between;
         white-space: nowrap;
-        overflow: hidden;
         text-overflow: ellipsis;
         max-width: 100%;
         margin-top: 4px;

chatbot-ui/src/app/utils/header/header.component.scss

@@ -7,14 +7,42 @@
     color: #fff;
     height: 50px;
     padding: 8px 32px;
+
+    @media (max-width: 600px) {
+      padding: 6px 12px;
+    }
   }
 
-  .sa-logo     { height: 50px; object-fit: contain; }
-  .kb-logo     { width: 24px;  height: 24px; object-fit: contain; }
+  .sa-logo { 
+    height: 50px; 
+    object-fit: contain;
+
+    @media (max-width: 600px) {
+      height: 36px;
+    }
+  }
+  .kb-logo { 
+    width: 24px;  
+    height: 24px; 
+    object-fit: contain; 
+
+    @media (max-width: 600px) {
+      width: 20px;
+      height: 20px;
+    }
+  }
 
   .header-right { display: flex; align-items: center; gap: 24px; }
 
   .partner {
     display: flex; align-items: center; gap: 6px;
-    .made-at { font-size: .85rem; font-weight: 500; white-space: nowrap; }
+    .made-at { 
+      font-size: .85rem; 
+      font-weight: 500; 
+      white-space: nowrap; 
+  
+      @media (max-width: 600px) {
+        font-size: 0.75rem;
+      }
+    }
   }