finish styling individual messages view for desktop

src/app/shared/chat/messages/messages.page.scss

@@ -2,7 +2,6 @@
 .header-toolbar{
     --background:transparent;
     --opacity: 1;
-    border: 1px solid red;
 
     .main-header{
         width: 100%; /* 400px */
@@ -12,21 +11,21 @@
         border-top-right-radius: 25px;
         background-color: #fff;
         overflow:hidden;
-        padding: 0px 20px 0px 20px;
+        //padding: 0px 20px 0px 20px;
         color:#000;
         transform: translate3d(0, 1px, 0);
+        padding: 30px 20px 0 20px !important;
         
         .header-top{
-          //width: 360px;
-          margin: 0px auto;
+          width: 100%;
           overflow: auto;
-          padding: 0 !important;
+          //padding: 0 !important;
           background: #fff;
            .middle{
-            padding: 0!important;
+            //padding: 0!important;
             float: left;
             width: 280px;
-            margin: 2.5px 0 0 5px;
+            margin: 2px 0 0 5px;
             display: flex;
             align-items: center;
             
@@ -40,9 +39,9 @@
           }
         }
         .header-bottom{
-          width: 310px;
+          width: 95%;
           overflow: auto;
-          margin: 0 auto;
+         
 
           .header-bottom-icon{
             width: 30px;
@@ -85,7 +84,7 @@
  ion-content{
    width: 100%;
    height: 100%;
-  border: 1px solid red;
+   padding: 30px 20px 0 20px !important;
    .welcome-text{
     /* width: 322px; */
     /*  width: em(422px); */
@@ -97,10 +96,10 @@
      padding: 10px;
      margin: 0 auto;
      line-height: 1.2rem;
-     margin: 20px 39px 25px;
+     //margin: 20px 39px 25px;
      border-radius: 8px;
-     
    }
+
    .messages{
     font-size: 13px;
     font-family: Roboto;
@@ -116,10 +115,14 @@
     height: 100%;
     word-wrap: break-word;
     -webkit-overflow-scrolling: touch;
+
+    .container-width-100{
+      width: 100%;
+      overflow: auto;
+    }
     
 
     .incoming-true, .incoming-false{
-      width: 305px;
        padding: 15px 20px;
        border-radius: 10px;
     }
@@ -144,19 +147,21 @@
       .time{
         color: #797979;
         text-align: right;
+        margin-left: 10px;
         float: right;
       }
    }
  }
 
  ion-footer{
-  width: 100%;
-  border: 1px solid red;
-   .row{
-     width: 380px;
-    margin: 0 auto;
-   }
-
+   padding-top: 7.5px;
+   padding-bottom: 7.5px;
+  .container{
+    justify-content: center;
+    justify-content: space-evenly;
+    
+  }
+  
   .chat-icon-options{
     display:block !important;
     font-size: 25px;