Enforce bulk action checkbox column via CSS

10px was never the right width.

Using CSS instead of the column's width attribute allows us to use media queries to change the width responsively

client/scss/components/_bulk_actions.scss

@@ -17,23 +17,6 @@
   }
 }
 
-.listing:not(.full-width) {
-  thead th.bulk-actions-filter-checkbox,
-  td.bulk-action-checkbox-cell {
-    width: 50px;
-    text-align: center;
-
-    input[type='checkbox'] {
-      margin: 0;
-    }
-
-    + th,
-    + td {
-      padding-inline-start: 0;
-    }
-  }
-}
-
 .bulk-actions-choices {
   &.footer {
     @include transition(transform 0.1s ease 0.1s);

client/scss/components/_listing.scss

@@ -75,13 +75,17 @@ ul.listing {
     }
   }
 
-  &.full-width td:first-child,
-  &.full-width th:first-child {
-    padding-inline-start: 20px;
-    padding-inline-end: 20px;
+  &:has(.bulk-action-checkbox) {
+    td:first-child,
+    th:first-child {
+      // Bulk actions, use smaller width (48px) for smaller screens
+      // (no need to match where the breadcrumbs are)
+      width: theme('spacing.10');
+      text-align: center;
 
-    input[type='checkbox'] {
-      margin-inline-end: 0;
+      input[type='checkbox'] {
+        margin-inline-end: 0;
+      }
     }
   }
 
@@ -419,14 +423,6 @@ table.listing {
   .table-headers,
   thead tr {
     height: 35px;
-
-    .title {
-      padding-inline-start: 0;
-    }
-  }
-
-  tbody .title {
-    padding-inline-start: 0;
   }
 }
 
@@ -603,17 +599,25 @@ table.listing {
       padding-inline-start: 50px;
     }
 
-    &.full-width td:first-child,
-    &.full-width th:first-child {
-      padding-inline-start: 30px;
-      padding-inline-end: 30px;
-    }
+    &:has(.bulk-action-checkbox) {
+      // Bulk actions, match the width of the header spacing up until
+      // the page title (final breadcrumb item):
+      // Breadcrumbs left padding: 20px
+      // Breadcrumbs toggle: 50px
+      // Breadcrumbs toggle margin right: 10px
+      // Total: 80px
+      th:first-child,
+      td:first-child {
+        width: theme('spacing.20');
+        // Follow the left padding for the breadcrumbs (20px)
+        // so the checkbox align with the breadcrumbs toggle.
+        padding-inline-start: theme('spacing.5');
+      }
 
-    // Reduce padding on sort order controls so total width matches previous state
-    &.full-width td.ord,
-    &.full-width th.ord {
-      padding-inline-end: 20px;
-      padding-inline-start: 20px;
+      th:nth-child(2),
+      td:nth-child(2) {
+        padding-inline-start: 0;
+      }
     }
 
     &.full-width .divider td {

wagtail/admin/views/pages/listing.py

@@ -96,7 +96,7 @@ class BaseIndexView(generic.IndexView):
     page_title = _("Exploring")
 
     columns = [
-        BulkActionsColumn("bulk_actions", width="10px"),
+        BulkActionsColumn("bulk_actions"),
         PageTitleColumn(
             "title",
             label=_("Title"),
@@ -310,7 +310,7 @@ class BaseIndexView(generic.IndexView):
         self.show_ordering_column = self.ordering == "ord"
         if self.show_ordering_column:
             self.columns = self.columns.copy()
-            self.columns[0] = OrderingColumn("ordering", width="10px", sort_key="ord")
+            self.columns[0] = OrderingColumn("ordering", width="80px", sort_key="ord")
         self.i18n_enabled = getattr(settings, "WAGTAIL_I18N_ENABLED", False)
 
         context = super().get_context_data(**kwargs)

wagtail/admin/views/pages/search.py

@@ -66,7 +66,7 @@ class BaseSearchView(PermissionCheckedMixin, BaseListingView):
     table_class = PageTable
 
     columns = [
-        BulkActionsColumn("bulk_actions", width="10px"),
+        BulkActionsColumn("bulk_actions"),
         PageTitleColumn(
             "title",
             classname="title",

wagtail/documents/views/documents.py

@@ -90,7 +90,7 @@ class IndexView(generic.IndexView):
     @cached_property
     def columns(self):
         columns = [
-            BulkActionsColumn("bulk_actions", width="10px"),
+            BulkActionsColumn("bulk_actions"),
             TitleColumn(
                 "title",
                 label=_("Title"),

wagtail/snippets/views/snippets.py

@@ -21,7 +21,6 @@ from wagtail.admin.ui.tables import (
     BulkActionsCheckboxColumn,
     Column,
     DateColumn,
-    InlineActionsTable,
     LiveStatusTagColumn,
     TitleColumn,
     UserColumn,
@@ -156,7 +155,6 @@ class ModelIndexView(generic.IndexView):
 
 class IndexView(generic.IndexViewOptionalFeaturesMixin, generic.IndexView):
     view_name = "list"
-    table_class = InlineActionsTable
 
     def get_base_queryset(self):
         # Allow the queryset to be a callable that takes a request