Add notice to show the limit

src/styles/components/kanban.scss

@@ -229,6 +229,15 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
     justify-content: space-between;
     padding: .5em;
 
+    .limit {
+      padding-left: .5rem;
+      font-weight: bold;
+
+      &.is-max {
+        color: $red;
+      }
+    }
+
     .dropdown-trigger {
       cursor: pointer;
     }

src/views/list/views/Kanban.vue

@@ -9,6 +9,12 @@
 						@focusout="() => saveBucketTitle(bucket.id)"
 						:ref="`bucket${bucket.id}title`"
 						@keyup.ctrl.enter="() => saveBucketTitle(bucket.id)">{{ bucket.title }}</h2>
+				<span 
+					class="limit"
+					:class="{'is-max': bucket.tasks.length >= bucket.limit}"
+					v-if="bucket.limit > 0">
+					{{ bucket.tasks.length }}/{{ bucket.limit }}
+				</span>
 				<div
 						class="dropdown is-right options"
 						:class="{ 'is-active': bucketOptionsDropDownActive[bucket.id] }"
@@ -280,7 +286,7 @@
 		created() {
 			this.taskService = new TaskService()
 			this.loadBuckets()
-			this.$nextTick(() => document.addEventListener('click', this.closeBucketDropdowns))
+//			this.$nextTick(() => document.addEventListener('click', this.closeBucketDropdowns))
 
 			// Save the current list view to local storage
 			// We use local storage and not vuex here to make it persistent across reloads.