Improve image listing checkbox alignment

Co-Authored-By: Thibaud Colas <thibaudcolas@gmail.com>

client/scss/components/_bulk_actions.scss

@@ -107,10 +107,3 @@
         }
     }
 }
-
-
-.bulk-action-checkbox-container {
-    .listing.images & {
-        text-align: left;
-    }
-}

client/scss/components/_listing.scss

@@ -610,7 +610,7 @@ table.listing {
             border-width: 0 0 0 1px;
 
             > li {
-                padding: 1.3em;
+                padding: 1.5em;
                 width: 200px;
                 height: 220px;
                 text-align: center;
@@ -618,6 +618,15 @@ table.listing {
                 border: 1px solid $color-grey-4;
                 border-width: 1px 1px 1px 0;
 
+                .bulk-action-checkbox {
+                    float: left;
+                    margin: -0.5em 0.5em 0.5em -0.75em;
+                }
+                .bulk-action-checkbox + .image-choice {
+                    clear: both;
+                    margin-top: 1em;
+                }
+
                 .image {
                     text-align: center;
                     height: 180px;

wagtail/images/templates/wagtailimages/images/results.html

@@ -21,9 +21,7 @@
     <ul class="listing horiz images">
         {% for image in images %}
             <li>
-                <div class="bulk-action-checkbox-container">
-                    {% include "wagtailadmin/bulk_actions/listing_checkbox_cell.html" with obj_type="image" obj=image aria_labelledby_prefix="select-image-label image_" aria_labelledby=image.pk|unlocalize aria_labelledby_suffix="_title" %}
-                </div>
+                {% include "wagtailadmin/bulk_actions/listing_checkbox_cell.html" with obj_type="image" obj=image aria_labelledby_prefix="select-image-label image_" aria_labelledby=image.pk|unlocalize aria_labelledby_suffix="_title" %}
                 <a class="image-choice" title="{% if collections %}{{ image.collection.name }} » {% endif %}{{ image.title }}" href="{% url 'wagtailimages:edit' image.id %}">
                     <figure>
                         {% include "wagtailimages/images/results_image.html" %}