From a38304f4ee61b045bea9d24834948cccc89b37f4 Mon Sep 17 00:00:00 2001
From: David Manthey <david.manthey@kitware.com>
Date: Thu, 10 Dec 2020 16:05:48 -0500
Subject: [PATCH] Allow wider modal dialogs.

This makes lists with multiple thumbnails look better.
---
 CHANGELOG.md                                             | 1 +
 .../web_client/stylesheets/itemList.styl                 | 9 +++++++++
 girder/girder_large_image/web_client/views/itemList.js   | 9 ++++++---
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 80bdb0e63..88460df97 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Improvements
 - Add a general filter control to item lists ([938](../../pull/938))
+- Item list modal dialogs are wider ([939](../../pull/939))
 
 ## 1.16.1
 
diff --git a/girder/girder_large_image/web_client/stylesheets/itemList.styl b/girder/girder_large_image/web_client/stylesheets/itemList.styl
index 47cba5322..6e7fa6d05 100644
--- a/girder/girder_large_image/web_client/stylesheets/itemList.styl
+++ b/girder/girder_large_image/web_client/stylesheets/itemList.styl
@@ -9,6 +9,8 @@ div.large_image_thumbnail
 div.large_image_container
   display inline-block
   min-width 160px
+div.large_image_container+span
+  white-space nowrap
 [large_image_columns="2"]
   div.large_image_container
     min-width 320px
@@ -63,3 +65,10 @@ ul.g-item-list
         width inherit
 .li-item-list-filter
   padding-left 12px
+@media (min-width: 768px)
+  .modal-dialog.li-item-list-dialog
+    width inherit
+@media (min-width: 900px)
+  .modal-dialog.li-item-list-dialog
+    width 70%
+    max-width 1000px
diff --git a/girder/girder_large_image/web_client/views/itemList.js b/girder/girder_large_image/web_client/views/itemList.js
index 2809a257c..7195297ea 100644
--- a/girder/girder_large_image/web_client/views/itemList.js
+++ b/girder/girder_large_image/web_client/views/itemList.js
@@ -62,6 +62,8 @@ wrap(ItemListWidget, 'initialize', function (initialize, settings) {
 });
 
 wrap(ItemListWidget, 'render', function (render) {
+    this.$el.closest('.modal-dialog').addClass('li-item-list-dialog');
+
     /* Chrome limits the number of connections to a single domain, which means
      * that time-consuming requests for thumbnails can bind-up the web browser.
      * To avoid this, limit the maximum number of thumbnails that are requested
@@ -182,8 +184,8 @@ wrap(ItemListWidget, 'render', function (render) {
     this._setFilter = () => {
         let val = this._generalFilter;
         let filter;
-        if (val !== undefined && val !== '') {
-            const columns = (this._confList() || {}).columns || [];
+        const columns = (this._confList() || {}).columns || [];
+        if (val !== undefined && val !== '' && columns.length) {
             filter = [];
             val.match(/"[^"]*"|'[^']*'|\S+/g).forEach((phrase) => {
                 if (!phrase.length) {
@@ -318,7 +320,8 @@ wrap(ItemListWidget, 'render', function (render) {
                             }
                         });
                     }
-                    $('a[g-item-cid="' + item.cid + '"]>i', parent).before(elem);
+                    var inner = $('<span>').html($('a[g-item-cid="' + item.cid + '"]').html());
+                    $('a[g-item-cid="' + item.cid + '"]', parent).empty().append(elem, inner);
                     _loadMoreImages(parent);
                 });
             }