refactor(mail): fix responsive detail

src/app/pages/mail/mailMessages.js

@@ -100,7 +100,7 @@
           "<br><p>Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed." +
           "Sed quis orci sed nisl sagittis viverra id at mauris. Nam venenatis mi nibh. Sed fringilla mattis vehic</p>"),
         "pic": "img/Kostya.png",
-        "email": "schwartzalford@mail.com",
+        "email": "schwart@mail.com",
         "position": "Technical Chef",
         "attachment": "file.doc",
         "tag": "family",
@@ -117,7 +117,7 @@
           "<br><p>Nulla facilisi. Nulla congue, arcu eget blandit lacinia, leo ante ullamcorper lectus, vel pulvinar justo ipsum vitae justo." +
           "Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed. Sed quis orci sed nisl sagittis viverra id at mauris. Nam venenatis mi nibh. Sed fringilla mattis vehic</p>"),
         "pic": "img/Kostya.png",
-        "email": "schwartzalford@mail.com",
+        "email": "schwart@mail.com",
         "position": "Technical Chef",
         "tag": "family",
         "labels": ['inbox', 'important']
@@ -132,7 +132,7 @@
           "<br>"+
           "<p>Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed. Sed quis orci sed nisl sagittis viverra id at mauris. Nam venenatis mi nibh. Sed fringilla mattis vehic</p>"),
         "pic": "img/Kostya.png",
-        "email": "schwartzalford@mail.com",
+        "email": "schwart@mail.com",
         "position": "Technical Chef",
         "tag": "study",
         "labels": ['trash']

src/sass/app/_email.scss

@@ -276,7 +276,7 @@
     width: 80px;
     height: 80px;
     border-radius: 40px;
-    margin-top: -115px;
+    margin-top: -60px;
   }
 
   .name {
@@ -447,13 +447,29 @@
   }
 }
 
+@media screen and (max-width: 1300px) {
+
+  .mail-navigation-container{
+    width: 260px
+  }
+
+  .side-message-navigation {
+    width: calc(100% - 260px);
+  }
+
+  .message-container {
+    width: calc(100% - 260px);
+  }
+
+}
+
 
 @media screen and (max-width: 1199px) {
   .name-h{
     display: inline;
   }
   .person-info .human-picture {
-    margin-top: -45px;
+    margin-top: -30px;
   }
   .second-name {
     margin-top: 0;