From ddc14b475d45fa8a0bd1c29c27b803384bfa0153 Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Tue, 19 Nov 2019 16:39:02 +0000
Subject: [PATCH 1/2] Adjust spacing so that header aligns with layout

---
 lib/assets/stylesheets/_core.scss                          | 1 +
 lib/assets/stylesheets/modules/_header.scss                | 7 +++++++
 lib/assets/stylesheets/modules/_search.scss                | 2 +-
 .../stylesheets/modules/_technical-documentation.scss      | 4 +---
 lib/assets/stylesheets/modules/_toc.scss                   | 4 ++--
 lib/source/layouts/_header.erb                             | 2 +-
 6 files changed, 13 insertions(+), 7 deletions(-)
 create mode 100644 lib/assets/stylesheets/modules/_header.scss

diff --git a/lib/assets/stylesheets/_core.scss b/lib/assets/stylesheets/_core.scss
index fa0f9b06..ba6227d5 100644
--- a/lib/assets/stylesheets/_core.scss
+++ b/lib/assets/stylesheets/_core.scss
@@ -6,6 +6,7 @@
 @import "modules/anchored-heading";
 @import "modules/app-pane";
 @import "modules/footer";
+@import "modules/header";
 @import "modules/page-review";
 @import "modules/search";
 @import "modules/contribution-banner";
diff --git a/lib/assets/stylesheets/modules/_header.scss b/lib/assets/stylesheets/modules/_header.scss
new file mode 100644
index 00000000..f773924a
--- /dev/null
+++ b/lib/assets/stylesheets/modules/_header.scss
@@ -0,0 +1,7 @@
+.app-header {
+  // Adjust the padding on the header container so that it matches the custom sidebar.
+  .govuk-header__container--full-width {
+    @include govuk-responsive-padding(6, "left");
+    @include govuk-responsive-padding(6, "right");
+  }
+}
diff --git a/lib/assets/stylesheets/modules/_search.scss b/lib/assets/stylesheets/modules/_search.scss
index 6640b4b3..b3f14ef8 100644
--- a/lib/assets/stylesheets/modules/_search.scss
+++ b/lib/assets/stylesheets/modules/_search.scss
@@ -43,7 +43,7 @@ html.has-search-results-open {
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: none;
     @include govuk-media-query(tablet) {
-      padding: 22px 20px 0 30px;
+      padding: govuk-spacing(6);
       top: 0;
       // The width of the sidebar
       left: 330px;
diff --git a/lib/assets/stylesheets/modules/_technical-documentation.scss b/lib/assets/stylesheets/modules/_technical-documentation.scss
index 568f5cc8..8c3cdee5 100644
--- a/lib/assets/stylesheets/modules/_technical-documentation.scss
+++ b/lib/assets/stylesheets/modules/_technical-documentation.scss
@@ -8,9 +8,7 @@
   color:  $govuk-text-colour;
 
   @include govuk-media-query(tablet) {
-    // We add 2 pixels to the gutter here to ensure there's sufficient spacing between
-    // an anchor link (see _anchored-heading.scss) on a heading and the left-hand pane.
-    margin: 0 govuk-spacing(6) (govuk-spacing(6) + 2px);
+    margin: 0 govuk-spacing(6) govuk-spacing(6);
   }
 
   .has-search-results-open & {
diff --git a/lib/assets/stylesheets/modules/_toc.scss b/lib/assets/stylesheets/modules/_toc.scss
index f6e1ccbd..c2896a07 100644
--- a/lib/assets/stylesheets/modules/_toc.scss
+++ b/lib/assets/stylesheets/modules/_toc.scss
@@ -18,7 +18,7 @@
         a:link, a:visited {
           display: block;
           position: relative;
-          padding: 8px govuk-spacing(6) 8px govuk-spacing(3);
+          padding: 8px govuk-spacing(6) 8px govuk-spacing(2);
           margin: 0 -1 * govuk-spacing(3);
           border-left: 5px solid transparent;
           text-decoration: none;
@@ -93,7 +93,7 @@
 
   @include govuk-media-query(tablet) {
     .toc {
-      padding: 22px govuk-spacing(6) govuk-spacing(3)
+      padding: govuk-spacing(5) govuk-spacing(6);
     }
 
     // Prevent the fixedsticky spacer from appearing if the browser is resized
diff --git a/lib/source/layouts/_header.erb b/lib/source/layouts/_header.erb
index 8b5130f1..94c1bfce 100644
--- a/lib/source/layouts/_header.erb
+++ b/lib/source/layouts/_header.erb
@@ -1,4 +1,4 @@
-<header class="govuk-header " role="banner" data-module="govuk-header">
+<header class="govuk-header app-header" role="banner" data-module="govuk-header">
   <div class="govuk-header__container govuk-header__container--full-width">
     <div class="govuk-header__logo">
       <% if config[:tech_docs][:service_link] %>

From e0eea926fafb06dd425b2f7f9f9088a56f754e38 Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Tue, 19 Nov 2019 16:39:29 +0000
Subject: [PATCH 2/2] Adjust header so that the product name does not wrap
 early

---
 lib/assets/stylesheets/modules/_header.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/lib/assets/stylesheets/modules/_header.scss b/lib/assets/stylesheets/modules/_header.scss
index f773924a..088d276f 100644
--- a/lib/assets/stylesheets/modules/_header.scss
+++ b/lib/assets/stylesheets/modules/_header.scss
@@ -4,4 +4,13 @@
     @include govuk-responsive-padding(6, "left");
     @include govuk-responsive-padding(6, "right");
   }
+  // Give the product name in the header more space so it does not wrap early on smaller screens.
+  @include govuk-media-query($from: desktop) {
+    .govuk-header__logo {
+      width: 45%;
+    }
+    .govuk-header__content {
+      width: 55%;
+    }
+  }
 }