Remove align-top classname and use top alignment in listings as standard

This is the most sensible rendering when one cell's content is overly tall - see for example the thumb image column on the bakerydemo People listing.

client/scss/components/_bulk_actions.scss

@@ -20,7 +20,6 @@
 .listing:not(.full-width) {
   thead th.bulk-actions-filter-checkbox,
   td.bulk-action-checkbox-cell {
-    padding: 0;
     width: 50px;
     text-align: center;
 

client/scss/components/_listing.scss

@@ -25,7 +25,7 @@ ul.listing {
 
   td,
   th {
-    padding: 1em;
+    padding: 1.2em 1em;
 
     &.no-padding {
       padding: 0;
@@ -37,6 +37,15 @@ ul.listing {
     padding: 0.6em 1em;
   }
 
+  td {
+    vertical-align: top;
+  }
+
+  td.title {
+    padding: 1em;
+    line-height: 2rem;
+  }
+
   thead {
     font-size: 1.1em;
     color: theme('colors.text-context');
@@ -106,12 +115,6 @@ ul.listing {
     border: 0;
   }
 
-  &.align-top td,
-  td.align-top {
-    vertical-align: top;
-    line-height: 2rem;
-  }
-
   &.chooser {
     tbody .parent-page {
       font-size: 1.15em;
@@ -234,6 +237,7 @@ ul.listing {
     > li {
       float: left;
       padding: 0 0.5em 0 0;
+      vertical-align: middle;
     }
   }
 
@@ -296,6 +300,7 @@ ul.listing {
     color: theme('colors.text-button-outline-default');
     display: block;
     text-align: center;
+    line-height: 3rem;
 
     .icon {
       width: 1.5rem;

wagtail/admin/views/pages/listing.py

@@ -47,14 +47,13 @@ class IndexView(PermissionCheckedMixin, BaseListingView):
             "title",
             label=_("Title"),
             sort_key="title",
-            classname="align-top title",
+            classname="title",
         ),
         DateColumn(
             "latest_revision_created_at",
             label=_("Updated"),
             sort_key="latest_revision_created_at",
             width="12%",
-            classname="align-top",
         ),
         Column(
             "type",
@@ -62,14 +61,12 @@ class IndexView(PermissionCheckedMixin, BaseListingView):
             accessor="page_type_display_name",
             sort_key="content_type",
             width="12%",
-            classname="align-top",
         ),
         PageStatusColumn(
             "status",
             label=_("Status"),
             sort_key="live",
             width="12%",
-            classname="align-top",
         ),
         NavigateToChildrenColumn("navigate", width="10%"),
     ]

wagtail/admin/views/pages/search.py

@@ -69,31 +69,28 @@ class BaseSearchView(PermissionCheckedMixin, BaseListingView):
         BulkActionsColumn("bulk_actions", width="10px"),
         PageTitleColumn(
             "title",
+            classname="title",
             label=_("Title"),
             sort_key="title",
-            classname="align-top",
         ),
-        ParentPageColumn("parent", label=_("Parent"), classname="align-top"),
+        ParentPageColumn("parent", label=_("Parent")),
         DateColumn(
             "latest_revision_created_at",
             label=_("Updated"),
             sort_key="latest_revision_created_at",
             width="12%",
-            classname="align-top",
         ),
         Column(
             "type",
             label=_("Type"),
             accessor="page_type_display_name",
             width="12%",
-            classname="align-top",
         ),
         PageStatusColumn(
             "status",
             label=_("Status"),
             sort_key="live",
             width="12%",
-            classname="align-top",
         ),
         NavigateToChildrenColumn("navigate", width="10%"),
     ]

wagtail/admin/views/pages/usage.py

@@ -25,14 +25,14 @@ class ContentTypeUseView(BaseListingView):
     page_kwarg = "p"
     paginate_by = 50
     columns = [
-        PageTitleColumn("title", label=_("Title")),
+        PageTitleColumn("title", classname="title", label=_("Title")),
         ParentPageColumn("parent", label=_("Parent")),
         DateColumn("latest_revision_created_at", label=_("Updated"), width="12%"),
         Column("type", label=_("Type"), accessor="page_type_display_name", width="12%"),
         PageStatusColumn("status", label=_("Status"), width="12%"),
     ]
     table_class = PageTable
-    table_classname = "listing align-top"
+    table_classname = "listing"
 
     def get(self, request, *, content_type_app_name, content_type_model_name):
         try: