css: refactoring & fixing - finalized

src/styles/base/form.scss

@@ -22,7 +22,7 @@
       text-align: center;
     }
 
-    p:first-child {
+    p.center {
       margin-bottom: 6.8rem;
       text-align: center;
     }

src/styles/base/main.scss

@@ -7,6 +7,10 @@ $breakpoints: (phone: 480px,
   display: none !important;
 }
 
+* {
+  outline: none;
+}
+
 :root {
   font-size: 10px;
   font-family: Open Sans, sans-serif;

src/styles/components/chat.scss

@@ -2,14 +2,18 @@
 // chat
 
 .chat-view {
-  padding: 1.7rem;
+  padding: 0;
   height: calc(100vh - 84px);
+  position: relative;
 
   > sib-chat {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
+    bottom: 0;
+    max-height: calc(100vh - 84px);
+    z-index: 0;
   }
 }
 

src/styles/components/sidebar.scss

@@ -6,13 +6,19 @@
 .with-sidebar {
   flex-grow: 1;
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: row;
   align-items: stretch;
   overflow-x: hidden;
 
   .views-container {
     flex: 1 0 0;
     overflow-y: auto;
+    -webkit-backface-visibility: hidden;
+
+    &.sidebar-is-closed {
+      margin-left: -15.5rem;
+      transform: translate(15.5rem);
+    }
   }
 
   >div {
@@ -96,11 +102,6 @@
       & .jsOffsiteToggle::before {
         transform: rotate(180deg);
       }
-
-      &~.views-container {
-        margin-left: -15.5rem;
-        transform: translate(15.5rem);
-      }
     }
   }
 }