More Tasks page fixes (#9475)

* fix datepicker not closing when clicking outside of it, fixes #9346

* fixes #9441

package.json

@@ -122,7 +122,7 @@
     "vue-router": "^3.0.0",
     "vue-style-loader": "^3.0.0",
     "vue-template-compiler": "^2.5.2",
-    "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker#45e607a7bccf4e3e089761b3b7b33e3f2c5dc21f",
+    "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker#825a866b6a9c52dd8c588a3e8b900880875ce914",
     "webpack": "^2.2.1",
     "webpack-merge": "^4.0.0",
     "winston": "^2.1.0",

website/client/components/tasks/task.vue

@@ -84,13 +84,15 @@
               .svg-icon.challenge.broken(v-html="icons.challenge", v-if='task.challenge.broken', @click='handleBrokenTask(task)')
             .d-flex.align-items-center(v-if="hasTags", :id="`tags-icon-${task._id}`")
               .svg-icon.tags(v-html="icons.tags")
-            b-popover.tags-popover.no-span-margin(
+            #tags-popover
+            b-popover(
               v-if="hasTags",
               :target="`tags-icon-${task._id}`",
               triggers="hover",
               placement="bottom",
+              container="tags-popover",
             )
-              .d-flex.align-items-center
+              .d-flex.align-items-center.tags-container
                 .tags-popover-title(v-once) {{ `${$t('tags')}:` }}
                 .tag-label(v-for="tag in getTagsFor(task)") {{tag}}
 
@@ -307,10 +309,6 @@
     margin-left: 4px;
   }
 
-  .no-span-margin span {
-    margin-left: 0px !important;
-  }
-
   .svg-icon.streak {
     width: 11.6px;
     height: 7.1px;
@@ -446,35 +444,38 @@
       font-weight: bold;
     }
   }
-</style>
 
-<style lang="scss">
-  // not working as scoped css
-  @import '~client/assets/scss/colors.scss';
+  #tags-popover /deep/ {
+    .tags-container {
+      flex-wrap: wrap;
+      margin-top: -3px;
+      margin-bottom: -3px;
+    }
 
-  .tags-popover {
-    // TODO fix padding, see https://github.com/bootstrap-vue/bootstrap-vue/issues/559#issuecomment-311150335
-    white-space: nowrap;
-  }
+    .tags-popover-title {
+      margin-right: 4px;
+      display: block;
+      float: left;
+      margin-top: -3px;
+      margin-bottom: -3px;
+    }
 
-  .tags-popover-title {
-    margin-right: 4px;
-    display: block;
-    float: left;
-  }
-
-  .tag-label {
-    display: block;
-    float: left;
-    margin-left: 4px;
-    border-radius: 100px;
-    background-color: $gray-50;
-    padding: 4px 10px;
-    color: $gray-300;
-    white-space: nowrap;
+    .tag-label {
+      display: block;
+      float: left;
+      margin-left: 4px;
+      border-radius: 100px;
+      background-color: $gray-50;
+      padding: 4px 10px;
+      color: $gray-300;
+      white-space: nowrap;
+      margin-top: 3px;
+      margin-bottom: 3px;
+    }
   }
 </style>
 
+
 <script>
 import { mapState, mapGetters, mapActions } from 'client/libs/store';
 import moment from 'moment';

website/client/components/tasks/taskModal.vue

@@ -67,7 +67,7 @@
               .option-item-label(v-once) {{ $t('hard') }}
         .option(v-if="task.type === 'todo'")
           label(v-once) {{ $t('dueDate') }}
-          datepicker(
+          datepicker.d-inline-block(
             v-model="task.date",
             :clearButton='true',
             clearButtonIcon='category-select',
@@ -78,7 +78,7 @@
           )
         .option(v-if="task.type === 'daily'")
           label(v-once) {{ $t('startDate') }}
-          datepicker(
+          datepicker.d-inline-block(
             v-model="task.startDate",
             :clearButton='false',
             :todayButton='true',