Merge pull request #2 from hermbit/fix-chat-layout

fix: bottom message hidden by input box

Author: codediodeio

package-lock.json

@@ -2,23 +2,24 @@
   <mat-icon>chat</mat-icon> &nbsp; Angular Chatbot
 </mat-toolbar>
 
-<div class="messenger">
+<div class="messages">
 
   <ng-container *ngFor="let message of messages | async">
-      
+
     <div class="message-row" [ngClass]="{ 'from': message.sentBy === 'bot',
                                           'to':   message.sentBy === 'user' }">
-      <div class="message" >
+      <div class="message">
         {{ message.content }}
       </div>
     </div>
-  
+
   </ng-container>
-  
-  <div class="send-message" (click)="messageInput.click()">
-    <mat-form-field floatPlaceholder="never">
-      <input matInput #messageInput [(ngModel)]="formValue" (keyup.enter)="sendMessage()" placeholder="Type a message..." autofocus autocomplete="off">
-    </mat-form-field>
-  </div>
 
+</div>
+
+<div class="send-message" (click)="messageInput.click()">
+  <mat-form-field floatPlaceholder="never">
+    <input matInput #messageInput [(ngModel)]="formValue" (keyup.enter)="sendMessage()" 
+      placeholder="Type a message..." autofocus autocomplete="off">
+  </mat-form-field>
 </div>

src/app/chat/chat-dialog/chat-dialog.component.html

@@ -5,9 +5,9 @@
     font-weight: 300;
 }
 
-.messenger {
+.messages {
     overflow: auto;
-    margin-top: 64px;
+    margin: 64px 0;
 }
 
 .message-row {