From 0eae8296a3320e8662bf3a9bf946f5bec63608a7 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 16 Nov 2020 12:15:08 -0500
Subject: [PATCH] fx(css): reduce list height of mailboxes

Fixes #5145
---
 UI/Templates/MailerUI/UIxMailMainFrame.wox           |  4 ++--
 .../scss/components/checkbox/checkbox.scss           | 12 ++++++++++++
 UI/WebServerResources/scss/components/list/list.scss |  4 +---
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 98192945a..fabdea312 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/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}"
diff --git a/UI/WebServerResources/scss/components/checkbox/checkbox.scss b/UI/WebServerResources/scss/components/checkbox/checkbox.scss
index 1c0752236..c07afb90b 100644
--- a/UI/WebServerResources/scss/components/checkbox/checkbox.scss
+++ b/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
diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss
index 4b6d23833..e2aa10054 100644
--- a/UI/WebServerResources/scss/components/list/list.scss
+++ b/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;
     }