From 38a55852044327a31a0ccaae11e065f293b15ba9 Mon Sep 17 00:00:00 2001
From: David Manthey <david.manthey@kitware.com>
Date: Tue, 8 Oct 2024 14:42:14 -0400
Subject: [PATCH] Fix filter input appearance in item lists in dialogs

---
 CHANGELOG.md                                  |  2 +-
 .../web_client/stylesheets/itemList.styl      | 30 ++++++++++++-------
 .../web_client/views/itemList.js              |  1 +
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a88574d3e..911b0604f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +11,7 @@
 - Update item lists check for large images when toggling recurse ([#1654](../../pull/1654))
 - Support named item lists ([#1665](../../pull/1665))
 - Add options to group within item lists ([#1666](../../pull/1666))
-- Make the filter field in item lists wider ([#1669](../../pull/1669))
+- Make the filter field in item lists wider ([#1669](../../pull/1669), [#1671](../../pull/1671))
 - Add a navigate option to item lists ([#1659](../../pull/1659))
 
 ### Changes
diff --git a/girder/girder_large_image/web_client/stylesheets/itemList.styl b/girder/girder_large_image/web_client/stylesheets/itemList.styl
index dd2b591af..20e57c2f7 100644
--- a/girder/girder_large_image/web_client/stylesheets/itemList.styl
+++ b/girder/girder_large_image/web_client/stylesheets/itemList.styl
@@ -116,16 +116,6 @@ ul.g-item-list[metadata-columns="0"]
 
 .li-item-list-filter
   padding-left 12px
-  flex 1
-  display flex
-  align-items baseline
-
-  input
-    flex 1
-
-  .li-item-list-filter-clear
-    cursor pointer
-    margin-right 20px
 
 @media (min-width 768px)
   .modal-dialog.li-item-list-dialog
@@ -145,9 +135,27 @@ ul.g-item-list[metadata-columns="0"]
     padding-left 5px
     font-weight normal
 
-.g-hierarchy-widget .g-hierarchy-actions-header
+.g-hierarchy-widget .g-hierarchy-actions-header.li-item-list-filter-parent
   display flex
   align-items baseline
 
   button.g-checked-actions-button
     float unset
+
+  .li-item-list-filter
+    flex 1
+    display flex
+    align-items baseline
+
+    input
+      flex 1
+
+    .li-item-list-filter-clear
+      cursor pointer
+      margin-right 20px
+
+.g-hierarchy-widget .g-hierarchy-breadcrumb-bar ol.breadcrumb.li-item-list-filter-parent
+  white-space wrap
+
+  .li-item-list-filter
+    white-space nowrap
diff --git a/girder/girder_large_image/web_client/views/itemList.js b/girder/girder_large_image/web_client/views/itemList.js
index 032929cb1..5c83182ec 100644
--- a/girder/girder_large_image/web_client/views/itemList.js
+++ b/girder/girder_large_image/web_client/views/itemList.js
@@ -506,6 +506,7 @@ wrap(ItemListWidget, 'render', function (render) {
                 base = root.find('.g-hierarchy-breadcrumb-bar>.breadcrumb>div').eq(0);
             }
             if (base.length) {
+                base.parent().addClass('li-item-list-filter-parent');
                 base[func]('<span class="li-item-list-filter">Filter:&nbsp;<input class="li-item-list-filter-input" title="' +
                     'All specified terms must be included.  ' +
                     'Surround with single quotes to include spaces, double quotes for exact value match.  ' +