diff --git a/website/client/components/tasks/column.vue b/website/client/components/tasks/column.vue index 8e4d1f79c5..5ad4a54a36 100644 --- a/website/client/components/tasks/column.vue +++ b/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 { diff --git a/website/client/components/tasks/user.vue b/website/client/components/tasks/user.vue index 0055793129..b5fdb8a257 100644 --- a/website/client/components/tasks/user.vue +++ b/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 {