From 1ddf3c62c48b8a976ff567b73495abdcefb5c2fe Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Tue, 11 Jan 2022 14:31:35 +1100
Subject: [PATCH] CSS fixes for table filter tags

---
 InvenTree/InvenTree/static/css/inventree.css |  2 ++
 InvenTree/templates/js/translated/filters.js | 11 ++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index 317ebaa37b..3f6fffe19b 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -319,6 +319,7 @@ main {
     display: inline-block;
     *display: inline;
     zoom: 1;
+    padding-top: 3px;
     padding-left: 3px;
     padding-right: 3px;
     border: 1px solid #aaa;
@@ -327,6 +328,7 @@ main {
     margin: 1px;
     margin-left: 5px;
     margin-right: 5px;
+    white-space: nowrap;
 }
 
 .filter-button {
diff --git a/InvenTree/templates/js/translated/filters.js b/InvenTree/templates/js/translated/filters.js
index 7ae8c3e4b4..78ed30eefa 100644
--- a/InvenTree/templates/js/translated/filters.js
+++ b/InvenTree/templates/js/translated/filters.js
@@ -305,7 +305,16 @@ function setupFilterList(tableKey, table, target) {
         var title = getFilterTitle(tableKey, key);
         var description = getFilterDescription(tableKey, key);
 
-        element.append(`<div title='${description}' class='filter-tag'>${title} = ${value}<span ${tag}='${key}' class='close'>x</span></div>`);
+        var filter_tag = `
+        <div title='${description}' class='filter-tag'>
+            ${title} = ${value}
+            <span ${tag}='${key}' class='close' style='color: #F55;'>
+                <span aria-hidden='true'><strong>&times;</strong></span>
+            </span>
+        </div>
+        `;
+
+        element.append(filter_tag);
     }
 
     // Callback for reloading the table