diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 9cbf31ab6..2389f9c3d 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -277,8 +277,8 @@
              </div> -->
       </md-toolbar>
       <div layout="row" class="md-flex">
-      <div class="view-list" layout="column">
 
+      <div class="view-list" layout="column">
         <md-toolbar class="md-accent md-hue-1"
                     ng-show="list.component.$selectedCount() == 0">
           <!-- sort/filter mode (default) -->
diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
index e4840eb00..12577d433 100644
--- a/UI/WebServerResources/scss/views/SchedulerUI.scss
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -17,16 +17,17 @@ $quarter_height: 10px;
 
   // Decrease width of middle column (list of events and tasks)
   $listView-width: grid-step(4) !global;
-  $detailView-width: grid-step(10) !global;
+  //$detailView-width: grid-step(10) !global;
 
   .view-list {
     min-width: ($listView-width - ($pitch * 2));
-    @include at(sm) {
-      @include flex-col(sm, 6, 1, 1);
-      min-width: ($pitch * 3);
+
+    @include to(xs) {
+      min-width: 100%;
+      @include flex-col($breakpoint: xs, $nb: 1, $grow: 1, $shrink: 1);
     }
     @include from(md) {
-      @include flex-col(md, 5, 1, 0);
+      @include flex-col($breakpoint: md, $nb: 5, $grow: 1, $shrink: 1);
     }
 
     // The color chip is smaller; adjust the "selected" icon accordingly
@@ -42,7 +43,7 @@ $quarter_height: 10px;
 
   .view-detail {
     @include at(sm) {
-      @include flex-col(sm, 10);
+      @include flex-col($breakpoint: sm, $nb: 10);
     }
     @include from(md) {
       flex: 1 1 auto;
diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss
index fea0c37ef..1bd012f88 100644
--- a/UI/WebServerResources/scss/views/_view.scss
+++ b/UI/WebServerResources/scss/views/_view.scss
@@ -41,17 +41,7 @@ body {
 
 // Variables
 $listView-width: grid-step(6) !global;
-$detailView-width: grid-step(8) !global;
-
-//[id="messagesList"] {
-//  flex: 0 0 $listView-width;
-//
-//}
-//
-//[id ="contactsList"] {
-//  flex: 0 1 $listView-width;
-//  min-width: ($listView-width - ($pitch * 2));
-//}
+//$detailView-width: grid-step(8) !global;
 
 [class|="view"] {
   position: relative;
@@ -82,11 +72,11 @@ $detailView-width: grid-step(8) !global;
     min-width: 100%;
   }
   @include at(sm){
-    @include flex-col(sm, 6, 1, 1);
+    @include flex-col($breakpoint: sm, $nb: 6, $grow: 1, $shrink: 1);
     min-width: ($pitch * 3);
   }
   @include from(md) {
-    @include flex-col(md, 6, 1, 0);
+    @include flex-col($breakpoint: md, $nb: 6, $grow: 1, $shrink: 0);
   }
 }