Group filter select fields in images listing view

client/webpack.config.js

@@ -241,6 +241,14 @@ module.exports = function exports(env, argv) {
       'scss',
       'chooser-duplicate-upload.scss',
     );
+  sassEntry[getOutputPath('images', 'css', 'listing')] = path.resolve(
+    'wagtail',
+    'images',
+    'static_src',
+    'wagtailimages',
+    'scss',
+    'listing.scss',
+  );
   sassEntry[getOutputPath('users', 'css', 'groups_edit')] = path.resolve(
     'wagtail',
     'users',

wagtail/admin/templates/wagtailadmin/shared/collection_chooser.html

@@ -1,6 +1,6 @@
 {% load i18n l10n wagtailadmin_tags %}
 
-<li>
+<li {% if li_classes %}class="{{ li_classes }}"{% endif %}>
     <div class="field choice_field select">
         <label for="collection_chooser_collection_id">{% trans "Collection" %}:</label>
         <div class="field-content">

wagtail/images/static_src/wagtailimages/scss/listing.scss

@@ -0,0 +1,32 @@
+@import '../../../../../client/scss/settings';
+@import '../../../../../client/scss/tools';
+
+.fields {
+  max-width: none;
+
+  @include media-breakpoint-up(sm) {
+    .field-col {
+      padding-inline-start: 0;
+
+      .field {
+        display: flex;
+        flex-direction: column;
+
+        .field-content,
+        label {
+          width: auto;
+          max-width: 75%;
+          padding-top: 0;
+        }
+      }
+    }
+
+    > li {
+      padding-top: 0;
+    }
+  }
+
+  .tagfilter legend {
+    width: auto;
+  }
+}

wagtail/images/templates/wagtailimages/images/index.html

@@ -4,6 +4,9 @@
 {% load i18n %}
 
 {% block titletag %}{% trans "Images" %}{% endblock %}
+{% block extra_css %}
+    <link rel="stylesheet" href="{% versioned_static 'wagtailimages/css/listing.css' %}" type="text/css" />
+{% endblock %}
 {% block extra_js %}
     {{ block.super }}
     <script>
@@ -49,41 +52,45 @@
     <div class="nice-padding">
         <form class="image-search search-bar" action="{% url 'wagtailimages:index' %}" method="GET" novalidate>
             <ul class="fields">
-                {% if collections %}
-                    {% include "wagtailadmin/shared/collection_chooser.html" %}
-                    {% if current_tag %}
-                        <input type="hidden" name="tag" value="{{ current_tag }}" />
-                    {% endif %}
-                {% endif %}
                 <li>
-                    <div class="field choice_field select">
-                        <label for="order_images_by">{% trans "Sort by" %}:</label>
-                        <div class="field-content">
-                            <div class="input">
-                                <select id="order_images_by" name="ordering">
-                                    {% for ordering, ordering_text in ORDERING_OPTIONS.items %}
-                                        <option value="{{ ordering }}" {% if current_ordering == ordering %}selected="selected"{% endif %}>{{ ordering_text }}</option>
-                                    {% endfor %}
-                                </select>
-                                <span></span>
+                    <ul class="field-row">
+                        {% if collections %}
+                            {% include "wagtailadmin/shared/collection_chooser.html" with li_classes="field-col col4" %}
+                            {% if current_tag %}
+                                <input type="hidden" name="tag" value="{{ current_tag }}" />
+                            {% endif %}
+                        {% endif %}
+                        <li class="field-col col4">
+                            <div class="field choice_field select">
+                                <label for="order_images_by">{% trans "Sort by" %}:</label>
+                                <div class="field-content">
+                                    <div class="input">
+                                        <select id="order_images_by" name="ordering">
+                                            {% for ordering, ordering_text in ORDERING_OPTIONS.items %}
+                                                <option value="{{ ordering }}" {% if current_ordering == ordering %}selected="selected"{% endif %}>{{ ordering_text }}</option>
+                                            {% endfor %}
+                                        </select>
+                                        <span></span>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                    </div>
-                </li>
-                <li>
-                    <div class="field choice_field select">
-                        <label for="entries_per_page">{% trans "Entries per page" %}:</label>
-                        <div class="field-content">
-                            <div class="input">
-                                <select id="entries_per_page" name="entries_per_page">
-                                    {% for value in ENTRIES_PER_PAGE_CHOICES %}
-                                        <option value="{{ value }}" {% if entries_per_page == value %}selected="selected"{% endif %}>{{ value }}</option>
-                                    {% endfor %}
-                                </select>
-                                <span></span>
+                        </li>
+                        <li class="field-col col4">
+                            <div class="field choice_field select">
+                                <label for="entries_per_page">{% trans "Entries per page" %}:</label>
+                                <div class="field-content">
+                                    <div class="input">
+                                        <select id="entries_per_page" name="entries_per_page">
+                                            {% for value in ENTRIES_PER_PAGE_CHOICES %}
+                                                <option value="{{ value }}" {% if entries_per_page == value %}selected="selected"{% endif %}>{{ value }}</option>
+                                            {% endfor %}
+                                        </select>
+                                        <span></span>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                    </div>
+                        </li>
+                    </ul>
                 </li>
                 {% if popular_tags %}
                     <li>