feat(mobile): improve ui for mobile

app-src/scripts/task-list/_task-list-d.scss

@@ -21,6 +21,11 @@ task-list {
       background-color: $dark-theme-bg-darker;
     }
   }
+
+  @media(max-width: $layout-xs) {
+    // make space for the expand icon
+    margin-left: 12px;
+  }
   &__backlog {
   }
 }
@@ -75,7 +80,7 @@ task-list {
 
   .first-line {
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
 
     // Button Stuff
     ng-md-icon {
@@ -144,6 +149,12 @@ task-list {
 
   .controls {
     white-space: nowrap;
+    text-align: right;
+
+    @media(max-width: $layout-xs) {
+      white-space: normal;
+      flex-basis: 100%;
+    }
   }
 
   .title {

app-src/scripts/work-view/_work-view-d.scss

@@ -2,5 +2,16 @@ work-view {
   display: block;
   max-width: $component-max-width;
   text-align: center;
-  margin:auto;
+  margin: auto;
+}
+
+.work-view-header {
+  @media(max-width: $layout-xs) {
+    .label {
+      display: none;
+    }
+    p {
+      margin: 0;
+    }
+  }
 }

app-src/scripts/work-view/work-view-d.html

@@ -1,10 +1,11 @@
 <header class="work-view-header">
   <p>
     <ng-md-icon icon="playlist_play"></ng-md-icon>
-    Working today: <strong ng-bind="vm.totalTimeWorkedToday|duration"></strong>
+    <span class="label">Working today:</span>
+    <strong ng-bind="vm.totalTimeWorkedToday|duration"></strong>
     <ng-md-icon icon="timer"></ng-md-icon>
     –
-    Estimate remaining: ~<strong ng-bind="vm.totalEstimationRemaining|duration"></strong>
+    <span class="label">Estimate remaining:</span> ~<strong ng-bind="vm.totalEstimationRemaining|duration"></strong>
     <ng-md-icon icon="timer"></ng-md-icon>
 
     <md-button ng-click="vm.collapseAllNotesAndSubTasks()"

app-src/styles/base/_page.scss

@@ -20,6 +20,11 @@ html {
 
 main {
   padding: 20px 20px 50px;
+
+  @media(max-width: $layout-xs) {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
 }
 
 global-link-list + .ui-view-container > main {