Improve toolbars on small screens

- normalized toolbars in message viewer, contact viewer and contact
  editor;
- lower width of sidenav on medium screens;
- reworked display of message headers

UI/WebServerResources/scss/components/toolbar/toolbar.scss

@@ -1,7 +1,7 @@
 /// toolbar.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
-$toolbar-tools-height: 100%;
+//$toolbar-tools-height: 100%;
 $toolbar-height: $pitch;
-$toolbar-medium-tall-height: 88px !default;
+//$toolbar-medium-tall-height: 88px !default;
 $toolbar-tall-height: ($toolbar-height * 2);
 $toolbar-indent-margin: $pitch;
 $toolbar-padding: $mg;
@@ -18,18 +18,34 @@ md-toolbar {
   font-size: 1em !important;
   background-image: url("../img/felt-transp.png");
   background-blend-mode: luminosity;
-  box-shadow: $whiteframe-shadow-z1;
+  //box-shadow: $whiteframe-shadow-z1;
 }
 
 .md-toolbar-tools {
-  padding: 0;
+  //padding: 0;
   // dirty fix to override angular-material botchy typography
   font-size: 1em !important;
 }
 
+md-toolbar,
+.md-toolbar-tools {
+  // Animate the first icon button of a "secondary" toolbar
+  &.sg-toolbar-secondary {
+    > .md-toolbar-tools > .sg-icon-button:first-child,
+    > .sg-icon-button:first-child {
+      transition: $swift-ease-in;
+      transform: translateX(0px);
+    }
+    &.ng-hide > .md-toolbar-tools > .sg-icon-button:first-child,
+    &.ng-hide > .sg-icon-button:first-child {
+      transform: translateX(-$touch-zone-width);
+    }
+  }
+}
+
 // angular-material is overspecifying so we are
 .md-toolbar-tools[layout-align="start start"] {
-  align-items: flex-start;
+  //align-items: flex-start;
 }
 
 .md-toolbar-tools.md-toolbar-tools-top {
@@ -50,14 +66,14 @@ header {
 }
 hgroup {
   align-items: center;
-  flex: 1 1 auto;
+  //flex: 1 1 auto;
   &h3 {
     margin-bottom: 0;
   }
 }
 .toolbar-main .md-button {
-  color: inherit;
-  font-size: sg-size(headline);
+//  color: inherit;
+//  font-size: sg-size(headline);
 }
 
 .sg-toolbar-group {
@@ -65,6 +81,9 @@ hgroup {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+//  & > .sg-icon-button:first-child {
+//    padding-left: 0;
+//  }
   &-1 {
     order: 1;
     max-width: $listView-width;