Make it easier to close tag editor for support tickets

customize.dist/src/less2/include/support.less

@@ -6,6 +6,7 @@
 
 @import (reference) "./colortheme-all.less";
 @import (reference) './tokenfield.less';
+@import (reference) './variables.less';
 @import (reference) './sidebar-layout.less';
 .support_main () {
     @ticket-bg: @cp_support-bg;
@@ -79,7 +80,16 @@
                     justify-content: space-between;
                     flex: 1;
                     min-width: 0;
+                    .cp-support-ticket-title {
+                        width: 100%;
+                        margin-bottom: @sidebar_base-margin;
+                        word-break: break-word;
+                    }
                     .cp-tags-list {
+                        &:empty {
+                            display: none !important;
+                        }
+                        margin-top: @sidebar_base-margin;
                         width: 100%;
                     }
                 }
@@ -87,6 +97,11 @@
                     margin-left: 1em;
                 }
             }
+            .cp-support-ticket-tags {
+                .cp-tokenfield-form button.cp-token-close {
+                    border-radius: @variables_radius !important;
+                }
+            }
             &.cp-filtered {
                 display: none;
             }

www/support/ui.js

@@ -429,6 +429,8 @@ define([
                 $show.prop('disabled', 'disabled');
                 if (visible && !force) {
                     return onHide(ticket, id, content, function () {
+                        $(tagsContainer).hide();
+                        $(tagsList).show();
                         $ticket.toggleClass('cp-not-loaded', true);
                         visible = false;
                         $(ticket).find('.cp-support-reply-cancel').click();
@@ -506,6 +508,17 @@ define([
                     $list.toggle();
                     $tags.toggle();
                 });
+                let close = h('button.btn.btn-secondary.cp-token-close', [
+                    h('i.fa.fa-times'),
+                    h('span', Messages.filePicker_close)
+                ]);
+                Util.onClickEnter($(close), () => {
+                    $list.toggle(true);
+                    $tags.toggle(false);
+                });
+                setTimeout(() => {
+                    $tags.find('.cp-tokenfield-form').append(close);
+                });
             }
 
             adminActions = h('span.cp-support-title-buttons', [ url, move, tag, show ]);
@@ -520,7 +533,7 @@ define([
         }, [
             h('div.cp-support-ticket-header', [
                 h('div.cp-support-header-data', [
-                    h('span', title),
+                    h('span.cp-support-ticket-title', title),
                     ctx.isAdmin ? UI.setHTML(h(`span${isPremium}`), Messages._getKey('support_from', [name])) : '',
                     h('span', new Date(content.time).toLocaleString()),
                     tagsList