fx(css): reduce list height of mailboxes

Fixes #5145

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -38,7 +38,7 @@
                  layout="column"
                  ng-repeat="account in ::app.accounts track by account.id"
                  ng-class="{ 'md-flex': account.$expanded }">
-          <md-list>
+          <md-list class="md-dense">
             <md-list-item ng-click="app.toggleAccountState(account)">
               <div class="sg-no-wrap"
                    aria-label="{{ ::'Toggle visibility' | loc }}"
@@ -89,7 +89,7 @@
                  ng-class="{ 'md-warn': account.$quota.percent > 70 }">{{account.$quota.description}}</div>
           </div>
           <md-virtual-repeat-container class="md-flex">
-            <md-list>
+            <md-list class="md-dense">
               <md-list-item
                   class="sg-mailbox-list-item md-clickable md-default-theme md-background md-hue-1"
                   ng-class="{'md-bg sg-selected': folder.id == app.service.selectedFolder.id}"

UI/WebServerResources/scss/components/checkbox/checkbox.scss

@@ -1,10 +1,22 @@
 /// checkbox.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
+
+$checkbox-min-height: 40px !default;
+
 @import 'extends';
 
 // Checkbox for the sidenav folders list
 // -------------------------------------
 md-sidenav md-checkbox {
+  min-height: $checkbox-width;
+  .md-container {
+    top: 50%;
     margin: 0;
+  }
+}
+
+// Dense mode
+md-sidenav .md-dense :not(.md-dense-disabled) md-checkbox:not(.md-dense-disabled) {
+  min-height: $checkbox-width;
 }
 
 // Checkbox in an inline form beside a select element

UI/WebServerResources/scss/components/list/list.scss

@@ -59,9 +59,6 @@ md-list-item {
     text-overflow: ellipsis;
     text-transform: initial;
     white-space: nowrap;
-    @include from(md) {
-      line-height: $list-item-height;
-    }
   }
   .sg-inline-list-icon-label {
     text-transform: uppercase;
@@ -91,6 +88,7 @@ md-list-item {
     // Gain some space on the right side of the folder icon
     .md-list-item-inner > md-icon:first-child,
     .md-list-item-inner > md-checkbox:first-child {
+      margin-top: auto;
       margin-right: $bl * 2;
     }