Align header elements on edit page on desktop

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_modals.scss

@@ -104,7 +104,8 @@ $zindex-modal-background: 500;
 
     .header-title {
         padding-left: 1em!important;
-        /* @TODO That specificity isn't working out so well... */
+        /* We need !important as the modal is nested within the page-editor and
+        page-editor.scss is compiled after this file */
     }
 }
 

wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -30,7 +30,7 @@
     }
 
     .header-title {
-        padding-left: 4em;
+        padding-left: 3.1em;
     }
 }
 

wagtail/wagtailadmin/templates/wagtailadmin/pages/create.html

@@ -12,7 +12,8 @@
 
         <div class="row row-flush">
             <div class="left col9 header-title">
-                <h1 class="icon icon-doc-empty-inverse">{% trans 'New' %} <span>{{ content_type.model_class.get_verbose_name }}</span></h1>
+                <h1 class="icon icon-doc-empty-inverse">
+                {% trans 'New' %} <span>{{ content_type.model_class.get_verbose_name }}</span></h1>
             </div>
         </div>
     </header>

wagtail/wagtailadmin/templates/wagtailadmin/pages/edit.html

@@ -12,7 +12,8 @@
 
         <div class="row row-flush">
             <div class="left col9 header-title">
-                <h1 class="icon icon-doc-empty-inverse">{% blocktrans with title=page.get_admin_display_title page_type=content_type.model_class.get_verbose_name %}Editing {{ page_type }} <span>{{ title }}</span>{% endblocktrans %}</h1>
+                <h1 class="icon icon-doc-empty-inverse">
+                {% blocktrans with title=page.get_admin_display_title page_type=content_type.model_class.get_verbose_name %}Editing {{ page_type }} <span>{{ title }}</span>{% endblocktrans %}</h1>
             </div>
             <div class="right col3">
                 {% trans "Status" %}