Render horizontal listing as a flex container

- Don't set fixed height on listed images
- Improve display of image listing for long image titles

CHANGELOG.txt

@@ -31,6 +31,7 @@ Changelog
  * Update links to wagtail.io to point to new domain wagtail.org (Jake Howard)
  * Add borders to TypedTableBlock to help visualize rows and columns (Scott Cranfill)
  * Set default submit button label on generic create views to 'Create' instead of 'Save' (Matt Westcott)
+ * Improve display of image listing for long image titles (Krzysztof Jeziorny)
  * Fix: Accessibility fixes for Windows high contrast mode; Dashboard icons colour and contrast (Sakshi Uppoor)
  * Fix: Rename additional 'spin' CSS animations to avoid clashes with other libraries (Kevin Gutiérrez)
  * Fix: `default_app_config` deprecations for Django >= 3.2 (Tibor Leupold)

client/scss/components/_listing.scss

@@ -600,19 +600,19 @@ table.listing {
 
 @include media-breakpoint-up(sm) {
     .listing {
-        &.horiz > li {
-            float: left;
+        &.horiz {
+            display: flex;
+            flex-wrap: wrap;
         }
 
         &.images {
-            @include clearfix();
             border: 1px solid $color-grey-4;
             border-width: 0 0 0 1px;
 
             > li {
                 padding: 1.5em;
                 width: 200px;
-                height: 220px;
+                height: auto;
                 text-align: center;
                 margin-top: -1px;
                 border: 1px solid $color-grey-4;

docs/releases/2.16.md

@@ -34,6 +34,7 @@
  * When moving pages, default to the current parent section (Tidjani Dia)
  * Add borders to TypedTableBlock to help visualize rows and columns (Scott Cranfill)
  * Set default submit button label on generic create views to 'Create' instead of 'Save' (Matt Westcott)
+ * Improve display of image listing for long image titles (Krzysztof Jeziorny)
 
 ### Bug fixes