Refine the grid position of uploaded images

Closes #9674
Ensure that when there are less images to fill up the columns, the columns still have the same max width

CHANGELOG.txt

@@ -11,6 +11,7 @@ Changelog
  * Add `purge_embeds` management command to delete all the cached embed objects in the database (Aman Pandey)
  * Make it possible to resize the page editor’s side panels (Sage Abdullah)
  * Add ability to include `form_fields` as an APIField on `FormPage` (Sævar Öfjörð Magnússon, Suyash Singh, LB (Ben) Johnston)
+ * Ensure that images listings are more consistently aligned when there are fewer images uploaded (Theresa Okoro)
  * Fix: Make sure workflow timeline icons are visible in high-contrast mode (Loveth Omokaro)
  * Fix: Ensure authentication forms (login, password reset) have a visible border in Windows high-contrast mode (Loveth Omokaro)
  * Fix: Ensure visual consistency between buttons and links as buttons in Windows high-contrast mode (Albina Starykova)

client/scss/components/_listing.scss

@@ -516,7 +516,7 @@ table.listing {
   .listing {
     &.horiz {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
       align-items: flex-end;
       justify-items: initial;
     }

docs/releases/4.2.md

@@ -21,6 +21,7 @@ depth: 1
  * Add [`purge_embeds`](purge_embeds) management command to delete all the cached embed objects in the database (Aman Pandey)
  * Make it possible to resize the page editor’s side panels (Sage Abdullah)
  * Add ability to include [`form_fields` as an APIField](form_page_fields_api_field) on `FormPage` (Sævar Öfjörð Magnússon, Suyash Singh, LB (Ben) Johnston)
+ * Ensure that images listings are more consistently aligned when there are fewer images uploaded (Theresa Okoro)
 
 ### Bug fixes