diff --git a/client/scss/components/_bulk_actions.scss b/client/scss/components/_bulk_actions.scss index 8463a71c35..1cc2fabbed 100644 --- a/client/scss/components/_bulk_actions.scss +++ b/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); diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss index 2e6bf538e2..9340af2212 100644 --- a/client/scss/components/_listing.scss +++ b/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 { diff --git a/wagtail/admin/views/pages/listing.py b/wagtail/admin/views/pages/listing.py index 202bc45ff4..f7572dc1ab 100644 --- a/wagtail/admin/views/pages/listing.py +++ b/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) diff --git a/wagtail/admin/views/pages/search.py b/wagtail/admin/views/pages/search.py index 913010d8a6..e699aa79c6 100644 --- a/wagtail/admin/views/pages/search.py +++ b/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", diff --git a/wagtail/documents/views/documents.py b/wagtail/documents/views/documents.py index e7094818a1..fa68da8ff6 100644 --- a/wagtail/documents/views/documents.py +++ b/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"), diff --git a/wagtail/snippets/views/snippets.py b/wagtail/snippets/views/snippets.py index 9ae13dd8cf..00ba685afe 100644 --- a/wagtail/snippets/views/snippets.py +++ b/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