Tweak header/content/action bar alignment

client/scss/components/_footer.scss

@@ -70,6 +70,6 @@ footer {
         width: calc(100% - #{$menu-width} - #{2 * $desktop-nice-padding});
         position: fixed;
         bottom: 0;
-        padding: 0.5em;
+        padding: 1em;
     }
 }

client/scss/components/_header.scss

@@ -50,6 +50,15 @@ header {
         margin-bottom: 0;
     }
 
+    &.tab-merged {
+        padding-left: $desktop-nice-padding;
+        padding-right: $desktop-nice-padding;
+
+        .right:last-child {
+            padding-right: 0;
+        }
+    }
+
     &.tab-merged,
     &.no-border {
         border: 0;
@@ -57,7 +66,12 @@ header {
         @include media-breakpoint-down(xs) {
             // To all hamburger menu to be visible
             padding-left: $desktop-nice-padding;
+            padding-right: 0;
             padding-top: 11px;
+
+            .nice-padding {
+                margin-left: -$desktop-nice-padding;
+            }
         }
 
     }

client/scss/components/_tabs.scss

@@ -9,10 +9,11 @@
         float: left;
         padding: 0;
         position: relative;
-        margin-right: 1px;
+        margin-right: 2px;
 
         &:first-of-type {
-            padding-left: 1.2em;
+            padding-left: $desktop-nice-padding;
+            margin-left: 0;
         }
     }
 
@@ -117,7 +118,6 @@
         li {
             width: auto;
             padding: 0;
-            margin-left: 0.7em;
         }
 
         a {

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

@@ -6,7 +6,10 @@
     }
 
     .breadcrumb {
-        margin: -1.2em 0 2em;
+        margin: -1.2em 0 2em;  // sass linter complains about $desktop-nice-padding here because of unit mismatch
+        margin-left: -$desktop-nice-padding;
+        margin-right: -$desktop-nice-padding;
+        padding-left: calc(#{$desktop-nice-padding} - 2em);
 
         @include media-breakpoint-up(sm) {
             margin-top: -1.8em;
@@ -84,21 +87,10 @@
         }
     }
 
-    .header-title,
-    .header-meta {
-        padding-left: 25px;
-
-        @include media-breakpoint-down(xs) {
-            padding-left: 0;
-            margin-left: -28px;
-            // Because it's nested within tab-merged which we've given padding
-            // on mobile viewports due to snippets
-        }
+    .header-title {
+        padding-left: 0;
     }
 
-    .live {
-        margin-right: 1em;
-    }
 }
 
 // An object is the basic wrapper around any field or group of fields in the editor interface
@@ -157,7 +149,7 @@
         background: $color-salmon-light;
         color: #200200;
         text-transform: uppercase;
-        padding: 0.9em 0 0.9em 4.1em;
+        padding: 0.9em 0 0.9em 5em;
         font-size: 0.95em;
         margin: 0;
         line-height: 1.5em;
@@ -193,7 +185,7 @@
             top: 0;
             line-height: 1.8em;
             left: 0;
-            width: 1.7em;
+            width: $desktop-nice-padding;
             color: $color-white;
             padding: 0;
             margin: 0;

wagtail/admin/templates/wagtailadmin/shared/header.html

@@ -21,7 +21,7 @@
 {% endcomment %}
 <header class="{% if merged %}merged{% endif %} {% if tabbed %}tab-merged{% endif %} {% if search_form %}hasform{% endif %}">
     {% block breadcrumb %}{% endblock %}
-    <div class="row nice-padding">
+    <div class="row{% if not tabbed %} nice-padding{% endif %}">
         <div class="left">
             <div class="col header-title">
                 <h1>{% if icon %}{% icon name=icon class_name="header-title-icon" %}{% endif %}