Repository: wagtail/wagtail

Issue:
Implement target width, resize rules, and overlap fallback for side panels
In https://github.com/wagtail/wagtail/blob/main/client/scss/components/forms/_form-width.scss, we define how much of the forms’ width should be dedicated to the form itself. This has fallen out of date with our [design system’s grid setup](https://www.figma.com/file/h67EsVXdWsfu38WGGxWfpi/Wagtail-Design-System?node-id=5172%3A30739), and needs to be updated.

We also need to update the width of the side panels, so it uses the correct value across different breakpoints.

For the time being, this should be done while retaining:

- Existing breakpoints in Wagtail as-is
- Existing mobile / desktop padding as-is (20px / 80px)


Discussion:

Resolving patch:
diff --git a/wagtail/admin/templatetags/wagtailadmin_tags.py b/wagtail/admin/templatetags/wagtailadmin_tags.py
--- 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,
     }
 
 


Test patch:
diff --git a/client/src/includes/breadcrumbs.test.js b/client/src/includes/breadcrumbs.test.js
--- 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/wagtail/admin/tests/pages/test_explorer_view.py b/wagtail/admin/tests/pages/test_explorer_view.py
--- a/wagtail/admin/tests/pages/test_explorer_view.py
+++ b/wagtail/admin/tests/pages/test_explorer_view.py
@@ -404,8 +404,8 @@ def test_breadcrumb_uses_specific_titles(self):
         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 @@ def test_admin_sees_breadcrumbs_up_to_root_page(self):
         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 @@ def test_admin_sees_breadcrumbs_up_to_root_page(self):
         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 @@ def test_admin_sees_breadcrumbs_up_to_root_page(self):
         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 @@ def test_nonadmin_sees_breadcrumbs_up_to_cca(self):
         # 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 @@ def test_nonadmin_sees_breadcrumbs_up_to_cca(self):
         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
--- a/wagtail/admin/tests/test_page_chooser.py
+++ b/wagtail/admin/tests/test_page_chooser.py
@@ -258,7 +258,7 @@ def test_admin_display_title_breadcrumb(self):
         # 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">