use more space for tags in the kanban UI

www/kanban/app-kanban.less

@@ -312,22 +312,24 @@
             display: inline-flex;
             align-items: baseline;
             flex: 1;
-            max-width: 80%;
+            //max-width: 80%;
             min-width: 150px;
-
+            .cp-kanban-filterTags-toggle {
+                min-width: 100px;
+            }
             .cp-kanban-filterTags-reset {
                 cursor: pointer;
-                margin-left: 10px;
-                flex-shrink: 0;
                 .tools_unselectable();
+                font-weight: bold;
                 i {
                     margin-right: 5px;
                 }
             }
-            .cp-kanban-filterTags-name {
+            .cp-kanban-filterTags-reset, .cp-kanban-filterTags-name {
                 flex-shrink: 0;
             }
             .cp-kanban-filterTags-list {
+                margin-right: 10px;
                 margin-left: 10px;
                 display: flex;
                 flex-wrap: wrap;

www/kanban/inner.js

@@ -874,14 +874,27 @@ define([
             // Tags filter
             var existing = getExistingTags(kanban.options.boards);
             var list = h('div.cp-kanban-filterTags-list');
-            var reset = h('span.cp-kanban-filterTags-reset', [h('i.fa.fa-times'), Messages.kanban_clearFilter]);
+            var reset = h('span.cp-kanban-filterTags-reset', [
+                //h('i.fa.fa-times'), // XXX creates vertical alignment issues
+                Messages.kanban_clearFilter
+            ]);
+            var hint = h('span.cp-kanban-filterTags-name', Messages.kanban_tags);
             var tags = h('div.cp-kanban-filterTags', [
-                h('span.cp-kanban-filterTags-name', Messages.kanban_tags),
+                h('span.cp-kanban-filterTags-toggle', [
+                    hint,
+                    reset,
+                ]),
                 list,
-                reset
             ]);
             var $reset = $(reset);
             var $list = $(list);
+            var $hint = $(hint);
+
+            var setTagFilterState = function (bool) {
+                $hint.css('display', bool? 'none': 'inherit');
+                $reset.css('display', bool? 'inherit': 'none');
+            };
+            setTagFilterState();
 
             var getTags = function () {
                 return $list.find('span.active').map(function () {
@@ -890,11 +903,7 @@ define([
             };
             var commitTags = function () {
                 var t = getTags();
-                if (t.length) {
+                setTagFilterState(t.length);
-                    $reset.css('visibility', '');
-                } else {
-                    $reset.css('visibility', 'hidden');
-                }
                 //framework._.sfCommon.setPadAttribute('tagsFilter', t);
                 kanban.options.tags = t;
                 kanban.setBoards(kanban.options.boards);
@@ -938,14 +947,11 @@ define([
                         return $(this).data('tag') === t;
                     }).addClass('active');
                 });
-                if (tags.length) {
+                setTagFilterState(tags.length);
-                    $reset.css('visibility', '');
-                } else {
-                    $reset.css('visibility', 'hidden');
-                }
                 //framework._.sfCommon.setPadAttribute('tagsFilter', tags);
             };
-            $reset.css('visibility', 'hidden').click(function () {
+            setTagFilterState();
+            $reset.click(function () {
                 setTags([]);
                 commitTags();
             });