From 27452c04e21d925ce3004e091627dc3dc13ebe3a Mon Sep 17 00:00:00 2001
From: twanariens <twanariens@gmail.com>
Date: Wed, 10 Mar 2021 15:23:08 +0100
Subject: [PATCH] Fix for the chat box going out of bounds

---
 .../app/shared/chat-box/chat-box.component.html  | 16 +++++++++-------
 .../app/shared/chat-box/chat-box.component.scss  | 12 ++++++++++++
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/shared/chat-box/chat-box.component.html b/src/Ombi/ClientApp/src/app/shared/chat-box/chat-box.component.html
index aa19bf1db..59a200703 100644
--- a/src/Ombi/ClientApp/src/app/shared/chat-box/chat-box.component.html
+++ b/src/Ombi/ClientApp/src/app/shared/chat-box/chat-box.component.html
@@ -6,13 +6,15 @@
             <p>{{user}}</p>
         </div>
       </div>
-      <div class="chatbox__messages" *ngFor="let m of messages">
-        <div class="chatbox__messages__user-message">
-          <div class="chatbox__messages__user-message--ind-message" [ngClass]="{'sender': m.chatType === ChatType.Sender, 'reciever':m.chatType === ChatType.Reciever }">
-            <p class="name" *ngIf="m?.username">{{m.username}}</p>
-            <br/>
-            <p class="message">{{m.message}}</p>
-            <p class="timestamp">{{m.date  | amLocal | amDateFormat: 'l LT'}}</p>
+      <div class="chatbox-message-box">
+        <div class="chatbox__messages" *ngFor="let m of messages">
+          <div class="chatbox__messages__user-message">
+            <div class="chatbox__messages__user-message--ind-message" [ngClass]="{'sender': m.chatType === ChatType.Sender, 'reciever':m.chatType === ChatType.Reciever }">
+              <p class="name" *ngIf="m?.username">{{m.username}}</p>
+              <br/>
+              <p class="message">{{m.message}}</p>
+              <p class="timestamp">{{m.date  | amLocal | amDateFormat: 'l LT'}}</p>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/Ombi/ClientApp/src/app/shared/chat-box/chat-box.component.scss b/src/Ombi/ClientApp/src/app/shared/chat-box/chat-box.component.scss
index 70f83b85f..4403ea369 100644
--- a/src/Ombi/ClientApp/src/app/shared/chat-box/chat-box.component.scss
+++ b/src/Ombi/ClientApp/src/app/shared/chat-box/chat-box.component.scss
@@ -195,6 +195,18 @@ html,body {
 :-ms-input-placeholder {  
    color: rgba(255, 255, 255, 0.9);
 }
+.chatbox-message-box{
+  height: 90%;
+  width: 75%;
+  position: relative;
+  overflow-y: scroll;
+  display:flex; 
+  flex-direction:column-reverse;
+}
+
+.chatbox__user-list p{
+  font-size:12px;
+}
 
 // ::-webkit-scrollbar {
 // 	width: 4px;