From 360f0406b56e071c80353c7d72ebe84ba1da0229 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 1 Nov 2021 08:38:24 +1100
Subject: [PATCH 1/3] CSS updates

- Add template for filter lists
- Filter lists now layout horizontally
- Change flex-row to flex-wrap
---
 InvenTree/build/templates/build/detail.html   | 14 ++---
 InvenTree/build/templates/build/index.html    |  4 +-
 .../company/templates/company/detail.html     | 28 +++------
 .../templates/company/manufacturer_part.html  |  4 +-
 .../templates/company/supplier_part.html      |  4 +-
 .../order/purchase_order_detail.html          |  8 +--
 .../templates/order/purchase_orders.html      |  4 +-
 .../templates/order/sales_order_detail.html   |  7 +--
 .../order/templates/order/sales_orders.html   |  4 +-
 InvenTree/part/templates/part/bom.html        |  7 +--
 InvenTree/part/templates/part/category.html   | 10 +---
 InvenTree/part/templates/part/detail.html     | 59 +++++++------------
 InvenTree/stock/templates/stock/item.html     | 16 ++---
 InvenTree/stock/templates/stock/location.html |  4 +-
 InvenTree/templates/attachment_table.html     |  6 +-
 InvenTree/templates/filter_list.html          |  1 +
 InvenTree/templates/stock_table.html          |  4 +-
 17 files changed, 65 insertions(+), 119 deletions(-)
 create mode 100644 InvenTree/templates/filter_list.html

diff --git a/InvenTree/build/templates/build/detail.html b/InvenTree/build/templates/build/detail.html
index c299c7e1b9..9400eb6473 100644
--- a/InvenTree/build/templates/build/detail.html
+++ b/InvenTree/build/templates/build/detail.html
@@ -160,9 +160,7 @@
     <div class='panel-content'>
         <div id='child-button-toolbar'>
             <div class='button-toolbar container-fluid float-right'>
-                <div class='filter-list' id='filter-list-sub-build'>
-                    <!-- Empty div for filters -->
-                </div>
+                {% include "filter_list.html" with id='sub-build' %}
             </div>
         </div>
         <table class='table table-striped table-condensed' id='sub-build-table' data-toolbar='#child-button-toolbar'></table>  
@@ -171,7 +169,7 @@
 
 <div class='panel panel-hidden' id='panel-allocate'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Allocate Stock to Build" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -210,9 +208,7 @@
                     <button id='allocate-selected-items' class='btn btn-success' title='{% trans "Allocate selected items" %}'>
                         <span class='fas fa-sign-in-alt'></span>
                     </button>
-                    <div class='filter-list' id='filter-list-builditems'>
-                        <!-- Empty div for table filters-->
-                    </div>
+                    {% include "filter_list.html" with id='builditems' %}
                 </div>
             </div>
         </div>
@@ -227,7 +223,7 @@
 
 <div class='panel panel-hidden' id='panel-outputs'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Incomplete Build Outputs" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -276,7 +272,7 @@
 
 <div class='panel panel-hidden' id='panel-attachments'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Attachments" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
diff --git a/InvenTree/build/templates/build/index.html b/InvenTree/build/templates/build/index.html
index 01970c45aa..ba8997ca05 100644
--- a/InvenTree/build/templates/build/index.html
+++ b/InvenTree/build/templates/build/index.html
@@ -45,9 +45,7 @@
                 <button class='btn btn-outline-secondary' type='button' id='view-list' title='{% trans "Display list view" %}'>
                     <span class='fas fa-th-list'></span>
                 </button>
-                <div class='filter-list' id='filter-list-build'>
-                    <!-- An empty div in which the filter list will be constructed -->
-                </div>
+                {% include "filter_list.html" with id="build" %}
             </div>
         </div>
     </div>
diff --git a/InvenTree/company/templates/company/detail.html b/InvenTree/company/templates/company/detail.html
index 14bc79b277..4181d81b6f 100644
--- a/InvenTree/company/templates/company/detail.html
+++ b/InvenTree/company/templates/company/detail.html
@@ -11,7 +11,7 @@
 
 <div class='panel panel-hidden' id='panel-supplier-parts'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Supplier Parts" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -46,9 +46,7 @@
                         </ul>
                     </div>
                 </div>
-                <div class='filter-list' id='filter-list-supplier-part'>
-                    <!-- Empty div (will be filled out with available BOM filters) -->
-                </div>
+                {% include "filter_list.html" with id="supplier-part" %}
             </div>
         </div>
         {% endif %}
@@ -60,7 +58,7 @@
 
 <div class='panel panel-hidden' id='panel-manufacturer-parts'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Manufacturer Parts" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -95,9 +93,7 @@
                         </ul>
                     </div> 
                 </div>
-                <div class='filter-list' id='filter-list-supplier-part'>
-                    <!-- Empty div (will be filled out with available BOM filters) -->
-                </div>
+                {% include "filter_list.html" with id="supplier-part" %}
             </div>
         </div>
         {% endif %}
@@ -117,7 +113,7 @@
 
 <div class='panel panel-hidden' id='panel-purchase-orders'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Purchase Orders" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -132,9 +128,7 @@
     <div class='panel-content'>
         <div id='po-button-bar'>
             <div class='button-toolbar container-fluid' style='float: right;'>
-                <div class='filter-list' id='filter-list-purchaseorder'>
-                    <!-- Empty div -->
-                </div>
+                {% include "filter_list.html" with id="purchaseorder" %}
             </div>
         </div>
 
@@ -145,7 +139,7 @@
 
 <div class='panel panel-hidden' id='panel-sales-orders'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Sales Orders" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -160,9 +154,7 @@
     <div class='panel-content'>
         <div id='so-button-bar'>
             <div class='button-toolbar container-fluid' style='float: right;'>
-                <div class='filter-list' id='filter-list-salesorder'>
-                    <!-- Empty div -->
-                </div>
+                {% include "filter_list.html" with id="salesorder" %}
             </div>
         </div>
 
@@ -177,9 +169,7 @@
     </div>
     <div class='panel-content'>
         <div id='assigned-stock-button-toolbar'>
-            <div class='filter-list' id='filter-list-stock'>
-                <!-- An empty div in which the filter list will be constructed -->
-            </div>
+            {% include "filter_list.html" with id="stock" %}
         </div>
         
         <table class='table table-striped table-condensed' id='assigned-stock-table' data-toolbar='#bassigned-stock-utton-toolbar'></table>
diff --git a/InvenTree/company/templates/company/manufacturer_part.html b/InvenTree/company/templates/company/manufacturer_part.html
index dad72e5558..fcfa22ee2d 100644
--- a/InvenTree/company/templates/company/manufacturer_part.html
+++ b/InvenTree/company/templates/company/manufacturer_part.html
@@ -104,7 +104,7 @@ src="{% static 'img/blank_image.png' %}"
 
 <div class='panel panel-hidden' id='panel-supplier-parts'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Suppliers" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -133,7 +133,7 @@ src="{% static 'img/blank_image.png' %}"
 
 <div class='panel panel-hidden' id='panel-parameters'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Parameters" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
diff --git a/InvenTree/company/templates/company/supplier_part.html b/InvenTree/company/templates/company/supplier_part.html
index 2f68f9b12b..52742cf488 100644
--- a/InvenTree/company/templates/company/supplier_part.html
+++ b/InvenTree/company/templates/company/supplier_part.html
@@ -143,7 +143,7 @@ src="{% static 'img/blank_image.png' %}"
 
 <div class='panel panel-hidden' id='panel-purchase-orders'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Supplier Part Orders" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -167,7 +167,7 @@ src="{% static 'img/blank_image.png' %}"
 
 <div class='panel panel-hidden' id='panel-pricing'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Pricing Information" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
diff --git a/InvenTree/order/templates/order/purchase_order_detail.html b/InvenTree/order/templates/order/purchase_order_detail.html
index 6a016d110a..b0d9d7d301 100644
--- a/InvenTree/order/templates/order/purchase_order_detail.html
+++ b/InvenTree/order/templates/order/purchase_order_detail.html
@@ -14,7 +14,7 @@
 
 <div class='panel panel-hidden' id='panel-order-items'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Purchase Order Items" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -37,9 +37,7 @@
     </div>
     <div class='panel-content'>
         <div id='order-toolbar-buttons' class='btn-group' style='float: right;'>
-            <div class='filter-list' id='filter-list-purchase-order-lines'>
-                <!-- An empty div in which the filter list will be constructed-->
-            </div>
+            {% include "filter_list.html" with id="order-lines" %}
         </div>
         
         <table class='table table-striped table-condensed' id='po-line-table' data-toolbar='#order-toolbar-buttons'>
@@ -58,7 +56,7 @@
 
 <div class='panel panel-hidden' id='panel-order-attachments'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Attachments" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
diff --git a/InvenTree/order/templates/order/purchase_orders.html b/InvenTree/order/templates/order/purchase_orders.html
index 4be817f8d2..e15e009927 100644
--- a/InvenTree/order/templates/order/purchase_orders.html
+++ b/InvenTree/order/templates/order/purchase_orders.html
@@ -36,9 +36,7 @@
                 <button class='btn btn-outline-secondary' type='button' id='view-list' title='{% trans "Display list view" %}'>
                     <span class='fas fa-th-list'></span>
                 </button>
-                <div class='filter-list' id='filter-list-purchaseorder'>
-                    <!-- An empty div in which the filter list will be constructed -->
-                </div>
+                {% include "filter_list.html" with id="purchaseorder" %}
             </div>
         </div>
     </div>
diff --git a/InvenTree/order/templates/order/sales_order_detail.html b/InvenTree/order/templates/order/sales_order_detail.html
index 5d4db70a34..887ecd390c 100644
--- a/InvenTree/order/templates/order/sales_order_detail.html
+++ b/InvenTree/order/templates/order/sales_order_detail.html
@@ -14,7 +14,7 @@
 
 <div class='panel panel-hidden' id='panel-order-items'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Sales Order Items" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -29,8 +29,7 @@
     <div class='panel-content'>
         <div id='order-toolbar-buttons' class='btn-group' style='float: right;'>
             <div class='btn-group'>
-                <div class='filter-list' id='filter-list-sales-order-lines'>
-                </div>
+                {% include "filter_list.html" with id="sales-order-lines" %}
             </div>
         </div>
         <table class='table table-striped table-condensed' id='so-lines-table' data-toolbar='#order-toolbar-buttons'>
@@ -49,7 +48,7 @@
 
 <div class='panel panel-hidden' id='panel-order-attachments'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Attachments" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
diff --git a/InvenTree/order/templates/order/sales_orders.html b/InvenTree/order/templates/order/sales_orders.html
index 048296c16b..bde9833bd6 100644
--- a/InvenTree/order/templates/order/sales_orders.html
+++ b/InvenTree/order/templates/order/sales_orders.html
@@ -39,9 +39,7 @@
                 <button class='btn btn-outline-secondary' type='button' id='view-list' title='{% trans "Display list view" %}'>
                     <span class='fas fa-th-list'></span>
                 </button>
-                <div class='filter-list' id='filter-list-salesorder'>
-                    <!-- An empty div in which the filter list will be constructed -->
-                </div>
+                {% include "filter_list.html" with id="salesorder" %}
             </div>
         </div>
     </div>
diff --git a/InvenTree/part/templates/part/bom.html b/InvenTree/part/templates/part/bom.html
index aa01dd64eb..7a3ab1ad6d 100644
--- a/InvenTree/part/templates/part/bom.html
+++ b/InvenTree/part/templates/part/bom.html
@@ -34,11 +34,8 @@
                 <li><a class='dropdown-item' href='#' id='bom-item-delete'><span class='fas fa-trash-alt icon-red'></span> {% trans "Delete Items" %}</a></li>
             </ul>
         </div>
-        {% endif %}
-   
-        <div class='filter-list' id='filter-list-bom'>
-            <!-- Empty div (will be filled out with avilable BOM filters) -->
-        </div>
+        {% endif %}   
+        {% include "filter_list.html" with id="bom" %}
     </div>
 </div>
 
diff --git a/InvenTree/part/templates/part/category.html b/InvenTree/part/templates/part/category.html
index 249c053801..6672adf210 100644
--- a/InvenTree/part/templates/part/category.html
+++ b/InvenTree/part/templates/part/category.html
@@ -116,7 +116,7 @@
 
 <div class='panel panel-hidden' id='panel-parts'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Parts" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -146,9 +146,7 @@
                     <li><a class='dropdown-item' href='#' id='multi-part-export' title='{% trans "Export" %}'>{% trans "Export Data" %}</a></li>
                 </ul>
             </div>
-            <div class='filter-list' id='filter-list-parts'>
-                <!-- Empty div -->
-            </div>
+            {% include "filter_list.html" with id="parts" %}
         </div>
     </div>
     <div class='panel-content'>
@@ -174,9 +172,7 @@
     <div class='panel-content'>
         <div id='subcategory-button-toolbar'>
             <div class='btn-group' role='group'>
-                <div class='filter-list' id='filter-list-category'>
-                    <!-- An empty div in which the filter list will be constructed -->
-                </div>
+                {% include "filter_list.html" with id="category" %}
             </div>
         </div>
     
diff --git a/InvenTree/part/templates/part/detail.html b/InvenTree/part/templates/part/detail.html
index b5008ae699..145b5bfb35 100644
--- a/InvenTree/part/templates/part/detail.html
+++ b/InvenTree/part/templates/part/detail.html
@@ -109,7 +109,7 @@
 
 <div class='panel panel-hidden' id='panel-test-templates'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Part Test Templates" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -123,10 +123,8 @@
     </div>
     <div class='panel-content'>
         <div id='test-button-toolbar'>
-            <div class='button-toolbar container-fluid' style="float: right;">
-                <div class='filter-list' id='filter-list-parttests'>
-                    <!-- Empty div -->
-                </div>
+            <div class='btn-group' role='group'>
+                {% include "filter_list.html" with id="parttests" %}
             </div>
         </div>
         
@@ -136,7 +134,7 @@
 
 <div class='panel panel-hidden' id='panel-purchase-orders'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>    
+        <div class='d-flex flex-wrap'>    
             <h4>{% trans "Purchase Orders" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -149,9 +147,7 @@
     <div class='panel-content'>
         <div id='po-button-bar'>
             <div class='button-toolbar container-fluid' style='float: right;'>
-                <div class='filter-list' id='filter-list-purchaseorder'>
-                    <!-- An empty div in which the filter list will be constructed -->
-                </div>
+                {% include "filter_list.html" with id="purchaseorder" %}
             </div>
         </div>
         
@@ -166,13 +162,8 @@
     </div>
     <div class='panel-content'>
         <div id='so-button-bar'>
-            <div class='button-toolbar container-fluid' style='float: right;'>
-                {% if 0 %}
-                <button class='btn btn-success' type='button' id='part-order2' title='{% trans "New sales order" %}'>{% trans "New Order" %}</button>
-                {% endif %}
-                <div class='filter-list' id='filter-list-salesorder'>
-                    <!-- An empty div in which the filter list will be constructed -->
-                </div>
+            <div class='btn-group' role='group'>
+                {% include "filter_list.html" with id="salesorder" %}
             </div>
         </div>
 
@@ -221,7 +212,7 @@
 
 <div class='panel panel-hidden' id='panel-variants'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Part Variants" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -238,9 +229,7 @@
             <div class='button-toolbar container-fluid'>
                 <div class='btn-group' role='group'>
                 </div>
-                <div class='filter-list' id='filter-list-variants'>
-                    <!-- Empty div (will be filled out with available BOM filters) -->
-                </div>
+                {% include "filter_list.html" with id="variants" %}
             </div>
         </div>
         
@@ -251,7 +240,7 @@
 
 <div class='panel panel-hidden' id='panel-part-parameters'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Parameters" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -274,7 +263,7 @@
 
 <div class='panel panel-hidden' id='panel-part-attachments'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Attachments" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -289,7 +278,7 @@
 
 <div class='panel panel-hidden' id='panel-related-parts'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Related Parts" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -303,10 +292,8 @@
     </div>
     <div class='panel-content'>
         <div id='related-button-bar'>
-            <div class='button-toolbar container-fluid' style='float: left;'>
-                <div class='filter-list' id='filter-list-related'>
-                    <!-- An empty div in which the filter list will be constructed -->
-                </div>
+            <div class='btn-group' role='group'>
+                {% include "filter_list.html" with id="related" %}
             </div>
         </div>
         
@@ -342,7 +329,7 @@
 
 <div class='panel panel-hidden' id='panel-bom'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Bill of Materials" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -391,8 +378,8 @@
     </div>
     <div class='panel-content'>
         <div id='assembly-button-toolbar'>
-            <div class='filter-list' id='filter-list-usedin'>
-                <!-- Empty div (will be filled out with avilable BOM filters) -->
+            <div class='btn-group' role='group'>
+                {% include "filter_list.html" with id="usedin" %}
             </div>
         </div>
         
@@ -403,7 +390,7 @@
 
 <div class='panel panel-hidden' id='panel-build-orders'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Part Builds" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -419,10 +406,8 @@
     </div>
     <div class='panel-content'>
         <div id='build-button-toolbar'>
-            <div class='button-toolbar container-fluid' style='float: right';>
-                <div class='filter-list' id='filter-list-build'>
-                    <!-- Empty div for filters -->
-                </div>
+            <div class='btn-group' role='group'>
+                {% include "filter_list.html" with id="build" %}
             </div>
         </div>
         
@@ -440,7 +425,7 @@
 
 <div class='panel panel-hidden' id='panel-suppliers'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Part Suppliers" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -467,7 +452,7 @@
     </div>
 
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Part Manufacturers" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
diff --git a/InvenTree/stock/templates/stock/item.html b/InvenTree/stock/templates/stock/item.html
index 4991855297..9bafc2633c 100644
--- a/InvenTree/stock/templates/stock/item.html
+++ b/InvenTree/stock/templates/stock/item.html
@@ -14,7 +14,7 @@
 
 <div class='panel panel-hidden' id='panel-history'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Stock Tracking Information" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -60,7 +60,7 @@
 
 <div class='panel panel-hidden' id='panel-test-data'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Test Data" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -80,12 +80,8 @@
     </div>
     <div class='panel-content'>
         <div id='test-button-toolbar'>
-            <div class='button-toolbar container-fluid' style="float: right;">
-                <div class='btn-group' role='group'>
-                </div>
-                <div class='filter-list' id='filter-list-stocktests'>
-                    <!-- Empty div -->
-                </div>
+            <div class='btn-group' role='group'>
+                {% include "filter_list.html" with id="stocktests" %}
             </div>
         </div>
         
@@ -95,7 +91,7 @@
 
 <div class='panel panel-hidden' id='panel-attachments'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Attachments" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
@@ -133,7 +129,7 @@
 
 <div class='panel panel-hidden' id='panel-installed-items'>
     <div class='panel-heading'>
-        <div class='d-flex flex-row'>
+        <div class='d-flex flex-wrap'>
             <h4>{% trans "Installed Stock Items" %}</h4>
             {% include "spacer.html" %}
             <div class='btn-group' role='group'>
diff --git a/InvenTree/stock/templates/stock/location.html b/InvenTree/stock/templates/stock/location.html
index 7dfd4e3025..7490d262bd 100644
--- a/InvenTree/stock/templates/stock/location.html
+++ b/InvenTree/stock/templates/stock/location.html
@@ -163,9 +163,7 @@
                         <li><a class='dropdown-item' href='#' id='multi-location-print-label' title='{% trans "Print labels" %}'><span class='fas fa-tags'></span> {% trans "Print labels" %}</a></li>
                     </ul>
                 </div>
-                <div class='filter-list' id='filter-list-location'>
-                    <!-- An empty div in which the filter list will be constructed -->
-                </div>
+                {% include "filter_list.html" with id="location" %}
             </div>
         </div>
     
diff --git a/InvenTree/templates/attachment_table.html b/InvenTree/templates/attachment_table.html
index c9b5a0bdf1..cbd47dd3cf 100644
--- a/InvenTree/templates/attachment_table.html
+++ b/InvenTree/templates/attachment_table.html
@@ -1,10 +1,8 @@
 {% load i18n %}
 
 <div id='attachment-buttons'>
-    <div class='btn-group'>
-        <div class='filter-list' id='filter-list-related'>
-                    <!-- An empty div in which the filter list will be constructed -->
-        </div>
+    <div class='btn-group' role='group'>
+        {% include "filter_list.html" with id="related" %}
     </div>
 </div>
 
diff --git a/InvenTree/templates/filter_list.html b/InvenTree/templates/filter_list.html
new file mode 100644
index 0000000000..ae29428924
--- /dev/null
+++ b/InvenTree/templates/filter_list.html
@@ -0,0 +1 @@
+<div class='filter-list d-flex flex-row form-row' id='filter-list-{{ id }}'><!-- Empty div for table filters --></div>
\ No newline at end of file
diff --git a/InvenTree/templates/stock_table.html b/InvenTree/templates/stock_table.html
index 2c0ae08b09..912d2e16a5 100644
--- a/InvenTree/templates/stock_table.html
+++ b/InvenTree/templates/stock_table.html
@@ -67,9 +67,7 @@
             {% endif %}
             {% endif %}
             {% endif %}
-            <div class='filter-list' id='filter-list-stock'>
-                <!-- An empty div in which the filter list will be constructed -->
-            </div>
+            {% include "filter_list.html" with id="stock" %}
         </div>
     </div>
 </div>

From 1f537a50b2fac0e8eb93eea5df6ada7c2058c814 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 1 Nov 2021 09:11:08 +1100
Subject: [PATCH 2/3] Fix weird height issue for filter tag

---
 InvenTree/InvenTree/static/css/inventree.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index 22513b2d85..92f39874d7 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -308,7 +308,13 @@
     transform: translate(0%, -25%);
 }
   
-.filter-list .close:hover {background: #bbb;}
+.filter-list .close:hover {
+    background: #bbb;
+}
+
+.filter-list .form-control {
+    width: initial;
+}
 
 .filter-tag {
     display: inline-block;

From 80e741fe1beb3cd3c31daf8936d50f91b5d161a8 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 1 Nov 2021 09:21:42 +1100
Subject: [PATCH 3/3] Further improvements for filter elements

---
 InvenTree/InvenTree/static/css/inventree.css | 10 ++++++----
 InvenTree/templates/js/translated/filters.js |  9 ++++-----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index 92f39874d7..a1cabc0435 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -295,8 +295,6 @@
     vertical-align: middle;
     margin: 1px;
     padding: 2px;
-    background: #eee;
-    border: 1px solid #eee;
     border-radius: 3px;
 }
 
@@ -322,8 +320,6 @@
     zoom: 1;
     padding-left: 3px;
     padding-right: 3px;
-    padding-top: 2px;
-    padding-bottom: 2px;
     border: 1px solid #aaa;
     border-radius: 3px;
     background: #eee;
@@ -332,6 +328,12 @@
     margin-right: 5px;
 }
 
+.filter-button {
+    padding: 2px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
 .filter-input {
     display: inline-block;
     *display: inline;
diff --git a/InvenTree/templates/js/translated/filters.js b/InvenTree/templates/js/translated/filters.js
index a2ef36f1d3..4383f0a096 100644
--- a/InvenTree/templates/js/translated/filters.js
+++ b/InvenTree/templates/js/translated/filters.js
@@ -281,7 +281,7 @@ function setupFilterList(tableKey, table, target) {
     // One blank slate, please
     element.empty();
 
-    element.append(`<button id='reload-${tableKey}' title='{% trans "Reload data" %}' class='btn btn-outline-secondary filter-tag'><span class='fas fa-redo-alt'></span></button>`);
+    element.append(`<button id='reload-${tableKey}' title='{% trans "Reload data" %}' class='btn btn-outline-secondary filter-button'><span class='fas fa-redo-alt'></span></button>`);
 
     // Callback for reloading the table
     element.find(`#reload-${tableKey}`).click(function() {
@@ -293,11 +293,10 @@ function setupFilterList(tableKey, table, target) {
         return;
     }
 
-    // If there are filters currently "in use", add them in!
-    element.append(`<button id='${add}' title='{% trans "Add new filter" %}' class='btn btn-outline-secondary filter-tag'><span class='fas fa-filter'></span></button>`);
+    element.append(`<button id='${add}' title='{% trans "Add new filter" %}' class='btn btn-outline-secondary filter-button'><span class='fas fa-filter'></span></button>`);
 
     if (Object.keys(filters).length > 0) {
-        element.append(`<button id='${clear}' title='{% trans "Clear all filters" %}' class='btn btn-outline-secondary filter-tag'><span class='fas fa-backspace icon-red'></span></button>`);
+        element.append(`<button id='${clear}' title='{% trans "Clear all filters" %}' class='btn btn-outline-secondary filter-button'><span class='fas fa-backspace icon-red'></span></button>`);
     }
 
     for (var key in filters) {
@@ -320,7 +319,7 @@ function setupFilterList(tableKey, table, target) {
             html += generateAvailableFilterList(tableKey);
             html += generateFilterInput(tableKey);
 
-            html += `<button title='{% trans "Create filter" %}' class='btn btn-outline-secondary filter-tag' id='${make}'><span class='fas fa-plus'></span></button>`;
+            html += `<button title='{% trans "Create filter" %}' class='btn btn-outline-secondary filter-button' id='${make}'><span class='fas fa-plus'></span></button>`;
 
             element.append(html);