From 1d2c68ebef21de3cca1cc423f220a45792d2a972 Mon Sep 17 00:00:00 2001
From: Dan Braghis <dan.braghis@torchbox.com>
Date: Mon, 15 Jun 2020 18:02:32 +0100
Subject: [PATCH] Tweak header/content/action bar alignment

---
 client/scss/components/_footer.scss           |  2 +-
 client/scss/components/_header.scss           | 14 +++++++++++
 client/scss/components/_tabs.scss             |  6 ++---
 .../scss/layouts/page-editor.scss             | 24 +++++++------------
 .../templates/wagtailadmin/shared/header.html |  2 +-
 5 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/client/scss/components/_footer.scss b/client/scss/components/_footer.scss
index 8ebb2da4fd..f30a18cea5 100644
--- a/client/scss/components/_footer.scss
+++ b/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;
     }
 }
diff --git a/client/scss/components/_header.scss b/client/scss/components/_header.scss
index a610ccf846..84e09b4af7 100644
--- a/client/scss/components/_header.scss
+++ b/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;
+            }
         }
 
     }
diff --git a/client/scss/components/_tabs.scss b/client/scss/components/_tabs.scss
index c9f33422a4..34bb9f93f8 100644
--- a/client/scss/components/_tabs.scss
+++ b/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 {
diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss
index d7a0a3d44f..9ee297cf79 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss
+++ b/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;
diff --git a/wagtail/admin/templates/wagtailadmin/shared/header.html b/wagtail/admin/templates/wagtailadmin/shared/header.html
index 3fb66164db..84bcdd7749 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/header.html
+++ b/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 %}