Client Tasks Length (#9101)

* change tasks column height

* stack columns on smaller screens

website/client/components/tasks/column.vue

@@ -43,7 +43,7 @@
   @import '~client/assets/scss/colors.scss';
 
   .tasks-column {
-    height: 556px;
+    min-height: 556px;
   }
 
   .task-wrapper + .reward-items {
@@ -60,11 +60,9 @@
     border-radius: 4px;
     background: $gray-600;
     padding: 8px;
-    // not sure why but this is necessary or the last task will overflow the container
-    padding-bottom: 0.1px;
-    position: relative;
-    height: calc(100% - 64px);
-    overflow: auto;
+    position: relative; // needed for the .bottom-gradient to be position: absolute
+    height: calc(100% - 56px);
+    padding-bottom: 30px;
   }
 
   .bottom-gradient {

website/client/components/tasks/user.vue

@@ -72,7 +72,7 @@
               span.text {{$t(type)}}
 
     .row.tasks-columns
-      task-column.col-3(
+      task-column.col-lg-3.col-md-6(
         v-for="column in columns",
         :type="column", :key="column",
         :isUser="true", :searchText="searchTextThrottled",
@@ -114,25 +114,25 @@
   }
 
   .dropdown-icon-item {
-      .icon_habit {
-        width: 30px;
-        height: 20px;
-      }
+    .icon_habit {
+      width: 30px;
+      height: 20px;
+    }
 
-      .icon_daily {
-        width: 24px;
-        height: 20px;
-      }
+    .icon_daily {
+      width: 24px;
+      height: 20px;
+    }
 
-      .icon_todo {
-        width: 20px;
-        height: 20px;
-      }
+    .icon_todo {
+      width: 20px;
+      height: 20px;
+    }
 
-      .icon_reward {
-        width: 26px;
-        height: 20px;
-      }
+    .icon_reward {
+      width: 26px;
+      height: 20px;
+    }
   }
 
   .dropdown-icon-item:hover .svg-icon, .dropdown-item.active .svg-icon {