From 5112c0eaa8a4e256fde2037de159bab551a6b549 Mon Sep 17 00:00:00 2001
From: Steve Stein <steven_ts@hotmail.com>
Date: Mon, 17 Oct 2022 05:18:02 -0600
Subject: [PATCH] =?UTF-8?q?Improve=20side=20panels=E2=80=99=20resizing=20i?=
=?UTF-8?q?n=20page=20editor=20and=20listings,=20and=20breadcrumbs=20align?=
=?UTF-8?q?ment.=20Fix=20#9036=20(#9090)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
---
CHANGELOG.txt | 2 +
client/scss/components/_form-side.scss | 12 ++++--
client/scss/components/_listing.scss | 29 +++++++++++---
client/scss/components/_panel.scss | 16 +++++---
client/scss/components/_tabs.scss | 14 +++++--
client/scss/components/forms/_form-width.scss | 39 +++----------------
client/src/includes/breadcrumbs.js | 23 +++--------
client/src/includes/breadcrumbs.test.js | 2 +-
client/src/includes/sidePanel.js | 5 ++-
docs/releases/4.1.md | 2 +
.../pages/page_listing_header.html | 4 +-
.../wagtailadmin/shared/breadcrumbs.html | 7 ++--
.../shared/headers/slim_header.html | 2 +-
.../shared/side_panels/status.html | 2 +-
.../wagtailadmin/workflows/create.html | 2 +-
.../wagtailadmin/workflows/edit.html | 2 +-
.../admin/templatetags/wagtailadmin_tags.py | 2 +
.../admin/tests/pages/test_explorer_view.py | 24 ++++++------
wagtail/admin/tests/test_page_chooser.py | 2 +-
19 files changed, 97 insertions(+), 94 deletions(-)
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index abe90a8ad4..6cdeb98b82 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -45,6 +45,8 @@ Changelog
* Support "Ctrl + f" in-page search within collapsed StreamField blocks (Thibaud Colas)
* Remember the last opened side panel in the page editor, activating it on page load (Sage Abdullah)
* Ensure that the `update_index` command can run without console output if called with `--verbosity 0` (Ben Sturmfels, Oliver Parker)
+ * Improve side panels’ resizing in page editor and listings (Steven Steinwand)
+ * Adjust breadcrumb text alignment and size in page listings & page editor (Steven Steinwand)
* Fix: Prevent `PageQuerySet.not_public` from returning all pages when no page restrictions exist (Mehrdad Moradizadeh)
* Fix: Ensure that duplicate block ids are unique when duplicating stream blocks in the page editor (Joshua Munn)
* Fix: Revise colour usage so that privacy & locked indicators can be seen in Windows High Contrast mode (LB (Ben Johnston))
diff --git a/client/scss/components/_form-side.scss b/client/scss/components/_form-side.scss
index 189a2fd739..5cded5e0dd 100644
--- a/client/scss/components/_form-side.scss
+++ b/client/scss/components/_form-side.scss
@@ -13,10 +13,11 @@
w-top-full
w-w-full
w-h-[calc(100vh-100%)]
- sm:w-max-w-[500px]
+ md:w-w-1/3
w-transform
w-translate-x-full
- w-px-6
+ w-px-5
+ xl:w-px-10
w-py-4
w-bg-white
w-box-border
@@ -25,7 +26,12 @@
w-border-l
w-border-grey-100
w-overflow-y-auto
- w-scrollbar-thin;
+ w-scrollbar-thin
+ md:w-min-w-[22.875rem]
+ sm:w-max-w-[22.5rem]
+ md:w-max-w-[35.937rem]
+ lg:w-max-w-[31.25rem]
+ xl:w-max-w-[46.875rem];
&--open {
@apply w-translate-x-0;
diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss
index f2eeb77837..126b07e380 100644
--- a/client/scss/components/_listing.scss
+++ b/client/scss/components/_listing.scss
@@ -68,6 +68,11 @@ ul.listing {
&.full-width td:first-child,
&.full-width th:first-child {
padding-inline-start: 20px;
+ padding-inline-end: 20px;
+
+ input[type='checkbox'] {
+ margin-inline-end: 0;
+ }
}
&.full-width {
@@ -411,12 +416,16 @@ table.listing {
width: 100%;
}
-// explorer specific tweaks
.page-explorer .w-breadcrumb {
li[hidden] ~ li:last-child,
li:only-child {
a {
font-size: theme('fontSize.18');
+ font-weight: theme('fontWeight.extrabold');
+
+ @include media-breakpoint-up(md) {
+ font-size: theme('fontSize.30');
+ }
}
}
}
@@ -624,7 +633,15 @@ table.listing {
&.full-width td:first-child,
&.full-width th:first-child {
- padding-inline-start: 25px;
+ padding-inline-start: 30px;
+ padding-inline-end: 30px;
+ }
+
+ // 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;
}
&.full-width .divider td {
@@ -661,10 +678,12 @@ table.listing {
// Ordering
td.ord {
+ // Align with the row's title text, and the column's label.
+ vertical-align: top;
+
.handle {
- // Align with the row's title text, and the column's label.
- margin-top: -28px;
- margin-inline-start: 13px;
+ width: 100%;
+ text-align: center;
}
}
diff --git a/client/scss/components/_panel.scss b/client/scss/components/_panel.scss
index 8329aece7d..da0fe938f4 100644
--- a/client/scss/components/_panel.scss
+++ b/client/scss/components/_panel.scss
@@ -1,6 +1,7 @@
$header-icon-size: theme('spacing.4');
$header-button-size-mobile: $mobile-nice-padding;
$header-button-size: theme('spacing.8');
+$header-gap: theme('spacing.1');
.w-panel {
margin-bottom: theme('spacing.10');
@@ -13,9 +14,12 @@ $header-button-size: theme('spacing.8');
margin-inline-start: -1 * $mobile-nice-padding;
@include media-breakpoint-up(sm) {
- $gap: theme('spacing.1');
- gap: $gap;
- margin-inline-start: calc(-1 * 2 * ($header-button-size + $gap));
+ gap: $header-gap;
+ margin-inline-start: calc(-1 * 1 * ($header-button-size + $header-gap));
+ }
+
+ @include media-breakpoint-up(md) {
+ margin-inline-start: calc(-1 * 2 * ($header-button-size + $header-gap));
}
}
@@ -28,7 +32,7 @@ $header-button-size: theme('spacing.8');
cursor: pointer;
padding-inline-end: theme('spacing.2');
- @include media-breakpoint-up(sm) {
+ @include media-breakpoint-up(md) {
padding-inline-end: theme('spacing.5');
}
}
@@ -89,7 +93,7 @@ $header-button-size: theme('spacing.8');
// The suffix anchor is intended for small viewports only.
.w-panel__anchor--suffix {
- @include media-breakpoint-up(sm) {
+ @include media-breakpoint-up(md) {
display: none;
}
}
@@ -98,7 +102,7 @@ $header-button-size: theme('spacing.8');
.w-panel__anchor--prefix {
display: none;
- @include media-breakpoint-up(sm) {
+ @include media-breakpoint-up(md) {
display: inline-grid;
}
}
diff --git a/client/scss/components/_tabs.scss b/client/scss/components/_tabs.scss
index 00f79c7266..ace3669dcb 100644
--- a/client/scss/components/_tabs.scss
+++ b/client/scss/components/_tabs.scss
@@ -15,8 +15,7 @@
}
&__list {
- @include nice-padding();
- @apply w-flex w-my-[3px] w-space-x-6 w-border-b w-border-grey-100 w-w-fit;
+ @apply w-flex w-pr-0 w-my-[3px] w-space-x-6 w-border-b w-border-grey-100 w-w-fit;
}
&__tab {
@@ -65,8 +64,15 @@
w-rounded-[1rem];
}
- &__panel {
- @include nice-padding();
+ &__list,
+ .tab-content {
+ @apply w-px-5 sm:w-px-10 md:w-px-20;
+
+ // If tab contents are nested inside of a nice-padding block then don't apply the admin padding
+ .nice-padding & {
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ }
}
// Optional animate attr for tabs to animate in
diff --git a/client/scss/components/forms/_form-width.scss b/client/scss/components/forms/_form-width.scss
index be70c5d79b..4594b34750 100644
--- a/client/scss/components/forms/_form-width.scss
+++ b/client/scss/components/forms/_form-width.scss
@@ -1,39 +1,12 @@
-@use 'sass:map';
-@use 'sass:math';
-
-/**
- * Calculate the ideal form width to avoid any overlap with the side panels.
- */
-
-@mixin form-width-vw($breakpoint) {
- .side-panel-open & {
- width: calc(
- 100vw - $menu-width - $side-panel-width - $desktop-nice-padding -
- theme('spacing.4')
- );
- }
-
- .side-panel-open.sidebar-collapsed & {
- width: calc(
- 100vw - $menu-width-slim - $side-panel-width - $desktop-nice-padding -
- theme('spacing.4')
- );
- }
-}
-
-/**
- * Special resizing logic for forms with side panels.
- */
-
.w-form-width {
@include max-form-width();
+}
- @include media-breakpoint-up(lg) {
- @include form-width-vw(lg);
- }
-
- @include media-breakpoint-up(xl) {
- @include form-width-vw(xl);
+@include media-breakpoint-up(md) {
+ .side-panel-open {
+ .tab-content {
+ width: theme('width.[2/3]');
+ }
}
}
diff --git a/client/src/includes/breadcrumbs.js b/client/src/includes/breadcrumbs.js
index eb60b5cd31..9e9f05ef02 100644
--- a/client/src/includes/breadcrumbs.js
+++ b/client/src/includes/breadcrumbs.js
@@ -29,7 +29,6 @@ export default function initCollapsibleBreadcrumbs() {
let open = false;
let mouseExitedToggle = true;
let keepOpen = false;
- let hideBreadcrumbsWithDelay;
function hideBreadcrumbs() {
breadcrumbItems.forEach((breadcrumb) => {
@@ -49,15 +48,10 @@ export default function initCollapsibleBreadcrumbs() {
}
function showBreadcrumbs() {
- breadcrumbItems.forEach((breadcrumb, index) => {
- setTimeout(() => {
- // eslint-disable-next-line no-param-reassign
- breadcrumb.hidden = false;
-
- setTimeout(() => {
- breadcrumb.classList.add(cssClass.maxWidth);
- }, 50);
- }, index * 10);
+ breadcrumbItems.forEach((breadcrumb) => {
+ // eslint-disable-next-line no-param-reassign
+ breadcrumb.hidden = false;
+ breadcrumb.classList.add(cssClass.maxWidth);
});
breadcrumbsToggle.setAttribute('aria-expanded', 'true');
open = true;
@@ -121,17 +115,10 @@ export default function initCollapsibleBreadcrumbs() {
header.addEventListener('mouseleave', () => {
if (!keepOpen) {
- hideBreadcrumbsWithDelay = setTimeout(() => {
- hideBreadcrumbs();
- // Give a little bit of time before closing in case the user changes their mind
- }, 500);
+ hideBreadcrumbs();
}
});
- header.addEventListener('mouseenter', () => {
- clearTimeout(hideBreadcrumbsWithDelay);
- });
-
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
hideBreadcrumbs();
diff --git a/client/src/includes/breadcrumbs.test.js b/client/src/includes/breadcrumbs.test.js
index bdf9ceb27f..c5f6ad8039 100644
--- a/client/src/includes/breadcrumbs.test.js
+++ b/client/src/includes/breadcrumbs.test.js
@@ -91,7 +91,7 @@ describe('initCollapsibleBreadcrumbs', () => {
expect(spy).toHaveBeenLastCalledWith('keydown', expect.any(Function));
expect(containerSpy).toHaveBeenLastCalledWith(
- 'mouseenter',
+ 'mouseleave',
expect.any(Function),
);
});
diff --git a/client/src/includes/sidePanel.js b/client/src/includes/sidePanel.js
index 62772ef934..69d2f43686 100644
--- a/client/src/includes/sidePanel.js
+++ b/client/src/includes/sidePanel.js
@@ -47,7 +47,10 @@ export default function initSidePanel() {
// eslint-disable-next-line no-param-reassign
panel.hidden = true;
panel.dispatchEvent(new CustomEvent('hide'));
- body.classList.remove('side-panel-open');
+
+ if (panelName === '') {
+ body.classList.remove('side-panel-open');
+ }
}
});
diff --git a/docs/releases/4.1.md b/docs/releases/4.1.md
index 1827529223..441cc6de6a 100644
--- a/docs/releases/4.1.md
+++ b/docs/releases/4.1.md
@@ -75,6 +75,8 @@ There are multiple improvements to the documentation theme this release, here ar
* Support "Ctrl + f" in-page search within collapsed StreamField blocks (Thibaud Colas)
* Remember the last opened side panel in the page editor, activating it on page load (Sage Abdullah)
* Ensure that the [`update_index`](update_index) command can run without console output if called with `--verbosity 0` (Ben Sturmfels, Oliver Parker)
+ * Improve side panels’ resizing in page editor and listings (Steven Steinwand)
+ * Adjust breadcrumb text alignment and size in page listings & page editor (Steven Steinwand)
### Bug fixes
diff --git a/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html b/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html
index ffa442a64f..1f02f33902 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html
@@ -7,9 +7,7 @@
{{ title }}
</h1>
{# breadcrumbs #}
- <div class="w-py-3{% if parent_page.is_root %} w-pl-3{% endif %}">
- {% breadcrumbs parent_page 'wagtailadmin_explore' url_root_name='wagtailadmin_explore_root' is_expanded=parent_page.is_root %}
- </div>
+ {% breadcrumbs parent_page 'wagtailadmin_explore' url_root_name='wagtailadmin_explore_root' is_expanded=parent_page.is_root classname='sm:w-py-3 lg:w-py-7' %}
{# Actions divider #}
<div class="w-w-px w-h-[30px] w-ml-auto sm:w-ml-0 w-bg-grey-100"></div>
{# Page actions dropdown #}
diff --git a/wagtail/admin/templates/wagtailadmin/shared/breadcrumbs.html b/wagtail/admin/templates/wagtailadmin/shared/breadcrumbs.html
index 52a561f0e4..a288926c7a 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/breadcrumbs.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/breadcrumbs.html
@@ -5,15 +5,16 @@
`pages` - A list of wagtail page objects
`trailing_breadcrumb_title` (string?) - use this for a non linkable last breadcrumb
+ `classname` - Modifier classes
{% endcomment %}
-{% with breadcrumb_link_classes='w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300' breadcrumb_item_classes='w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold' icon_classes='w-w-4 w-h-4 w-ml-3' %}
+{% with breadcrumb_link_classes='w-flex w-items-center w-h-full w-text-primary w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full' breadcrumb_item_classes='w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold' icon_classes='w-w-4 w-h-4 w-ml-3' %}
{# Breadcrumbs are visible on mobile by default but hidden on desktop #}
- <div class="w-breadcrumb w-flex w-flex-row w-items-center w-overflow-x-auto w-overflow-y-hidden w-scrollbar-thin" data-breadcrumb-next{% if not pages %} hidden{% endif %}>
+ <div class="w-breadcrumb w-flex w-flex-row w-items-center w-overflow-x-auto w-overflow-y-hidden w-scrollbar-thin {{ classname }} {% if is_expanded %} w-pl-3{% endif %}" data-breadcrumb-next{% if not pages %} hidden{% endif %}>
{% if not is_expanded %}
<button
type="button"
data-toggle-breadcrumbs
- class="w-flex w-items-center w-justify-center w-box-border w-ml-0 w-p-4 w-w-slim-header w-h-full w-bg-transparent w-text-grey-400 w-transition hover:w-scale-110 hover:w-text-primary w-outline-offset-inside"
+ class="w-flex w-items-center w-justify-center w-box-border w-ml-0 w-p-4 w-mr-2.5 w-w-slim-header w-h-full w-bg-transparent w-text-grey-400 w-transition hover:w-scale-110 hover:w-text-primary w-outline-offset-inside"
aria-label="{% trans 'Toggle breadcrumbs' %}"
aria-expanded="false"
>
diff --git a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
index 13cb8d3633..281e8b01a4 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
@@ -3,7 +3,7 @@
<header class="w-flex w-flex-col sm:w-flex-row w-items-center w-justify-between w-bg-grey-50 w-border-b w-border-grey-100 w-px-0 w-py-0 w-mb-0 w-relative w-top-0 w-z-header sm:w-sticky w-min-h-slim-header">
{# Padding left on mobile to give space for navigation toggle, #}
- <div class="w-pl-slim-header w-min-h-slim-header sm:w-pl-0 sm:w-pr-2 w-w-full w-flex-1 w-overflow-x-auto w-box-border">
+ <div class="w-slim-header w-pl-slim-header sm:w-pl-5 w-min-h-slim-header sm:w-pr-2 w-w-full w-flex-1 w-overflow-x-auto w-box-border">
<div class="w-flex w-flex-1 w-items-center w-overflow-hidden">
{% block header_content %}
{% endblock %}
diff --git a/wagtail/admin/templates/wagtailadmin/shared/side_panels/status.html b/wagtail/admin/templates/wagtailadmin/shared/side_panels/status.html
index 63428c264e..2c155079b5 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/side_panels/status.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/side_panels/status.html
@@ -1,6 +1,6 @@
{% load wagtailadmin_tags i18n %}
-<div class="w-divide-y w-divide-grey-100 w-py-6 w-pl-2 md:w-pl-8">
+<div class="w-divide-y w-divide-grey-100 w-py-6 w-pl-2 lg:w-pl-8">
{% for template in status_templates %}
{% include template %}
{% endfor %}
diff --git a/wagtail/admin/templates/wagtailadmin/workflows/create.html b/wagtail/admin/templates/wagtailadmin/workflows/create.html
index ef44448819..7cf2ba295b 100644
--- a/wagtail/admin/templates/wagtailadmin/workflows/create.html
+++ b/wagtail/admin/templates/wagtailadmin/workflows/create.html
@@ -20,7 +20,7 @@
<form action="{{ view.get_add_url }}" enctype="multipart/form-data" method="POST" novalidate>
{% csrf_token %}
- <div class="nice-padding">
+ <div class="nice-padding w-form-width">
{% block form %}{{ edit_handler.render_form_content }}{% endblock %}
{% trans "Assign your workflow to pages" as heading %}
diff --git a/wagtail/admin/templates/wagtailadmin/workflows/edit.html b/wagtail/admin/templates/wagtailadmin/workflows/edit.html
index 5c3d0231a3..2ba4ee3d41 100644
--- a/wagtail/admin/templates/wagtailadmin/workflows/edit.html
+++ b/wagtail/admin/templates/wagtailadmin/workflows/edit.html
@@ -21,7 +21,7 @@
<form action="{% block form_action %}{{ view.edit_url }}{% endblock %}"{% if is_multipart %} enctype="multipart/form-data"{% endif %} method="POST" novalidate>
{% csrf_token %}
- <div class="nice-padding">
+ <div class="nice-padding w-form-width">
{% block form %}{{ edit_handler.render_form_content }}{% endblock %}
{% trans "Assign your workflow to pages" as heading %}
diff --git a/wagtail/admin/templatetags/wagtailadmin_tags.py b/wagtail/admin/templatetags/wagtailadmin_tags.py
index 15a9c68592..f09e23adea 100644
--- a/wagtail/admin/templatetags/wagtailadmin_tags.py
+++ b/wagtail/admin/templatetags/wagtailadmin_tags.py
@@ -67,6 +67,7 @@ def breadcrumbs(
page_perms=None,
querystring_value=None,
trailing_breadcrumb_title=None,
+ classname=None,
):
user = context["request"].user
@@ -87,6 +88,7 @@ def breadcrumbs(
"trailing_breadcrumb_title": trailing_breadcrumb_title, # Only used in collapsible breadcrumb templates
"url_name": url_name,
"url_root_name": url_root_name,
+ "classname": classname,
}
diff --git a/wagtail/admin/tests/pages/test_explorer_view.py b/wagtail/admin/tests/pages/test_explorer_view.py
index cac6ff8870..5d7d3a9e09 100644
--- a/wagtail/admin/tests/pages/test_explorer_view.py
+++ b/wagtail/admin/tests/pages/test_explorer_view.py
@@ -404,8 +404,8 @@ class TestBreadcrumb(TestCase, WagtailTestUtils):
expected = (
"""
<li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-breadcrumb-item hidden>
- <a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300" href="%s">
- Secret plans (simple page)
+ <a class="w-flex w-items-center w-h-full w-text-primary w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="%s">
+ Secret plans (simple page)
</a>
<svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">
<use href="#icon-arrow-right"></use>
@@ -656,8 +656,8 @@ class TestExplorablePageVisibility(TestCase, WagtailTestUtils):
self.assertEqual(response.status_code, 200)
expected = """
<li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-breadcrumb-item hidden>
- <a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300" href="/admin/pages/">
- Root
+ <a class="w-flex w-items-center w-h-full w-text-primary w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="/admin/pages/">
+ Root
</a>
<svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">
<use href="#icon-arrow-right"></use>
@@ -668,8 +668,8 @@ class TestExplorablePageVisibility(TestCase, WagtailTestUtils):
self.assertContains(response, expected, html=True)
expected = """
<li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-breadcrumb-item hidden>
- <a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300" href="/admin/pages/4/">
- Welcome to example.com!
+ <a class="w-flex w-items-center w-h-full w-text-primary w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="/admin/pages/4/">
+ Welcome to example.com!
</a>
<svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">
<use href="#icon-arrow-right"></use>
@@ -679,8 +679,8 @@ class TestExplorablePageVisibility(TestCase, WagtailTestUtils):
self.assertContains(response, expected, html=True)
expected = """
<li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-breadcrumb-item hidden>
- <a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300" href="/admin/pages/5/">
- Content
+ <a class="w-flex w-items-center w-h-full w-text-primary w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="/admin/pages/5/">
+ Content
</a>
<svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">
<use href="#icon-arrow-right"></use>
@@ -697,8 +697,8 @@ class TestExplorablePageVisibility(TestCase, WagtailTestUtils):
# since it's his Closest Common Ancestor.
expected = """
<li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-breadcrumb-item hidden>
- <a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300" href="/admin/pages/4/">
- Root
+ <a class="w-flex w-items-center w-h-full w-text-primary w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="/admin/pages/4/">
+ Root
</a>
<svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">
<use href="#icon-arrow-right"></use>
@@ -708,8 +708,8 @@ class TestExplorablePageVisibility(TestCase, WagtailTestUtils):
self.assertContains(response, expected, html=True)
expected = """
<li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-breadcrumb-item hidden>
- <a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300" href="/admin/pages/5/">
- Content
+ <a class="w-flex w-items-center w-h-full w-text-primary w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="/admin/pages/5/">
+ Content
</a>
<svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">
<use href="#icon-arrow-right"></use>
diff --git a/wagtail/admin/tests/test_page_chooser.py b/wagtail/admin/tests/test_page_chooser.py
index 611d15219d..46fbb4b5ac 100644
--- a/wagtail/admin/tests/test_page_chooser.py
+++ b/wagtail/admin/tests/test_page_chooser.py
@@ -258,7 +258,7 @@ class TestChooserBrowseChild(TestCase, WagtailTestUtils):
# Look for a link element in the breadcrumbs with the admin title
expected = """
<li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold " data-breadcrumb-item>
- <a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300" href="/admin/choose-page/{page_id}/?">
+ <a class="w-flex w-items-center w-h-full w-text-primary w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="/admin/choose-page/{page_id}/?">
{page_title}
</a>
<svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">