From 7f2352d350abab38046c7e137124dedaf89a076f Mon Sep 17 00:00:00 2001
From: beeps <hi+github@berly.kim>
Date: Thu, 25 Apr 2024 15:33:25 +0100
Subject: [PATCH] Update header and phase banner styles to work with service
 header

- Makes header border full-width in all circumstances
- Adds content width container to phase banner
---
 .../upload-your-photo-success/index.njk              | 12 ++++++------
 .../src/govuk/components/header/_index.scss          |  5 +----
 .../src/govuk/components/phase-banner/_index.scss    |  5 +++--
 .../src/govuk/components/phase-banner/template.njk   |  2 +-
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/upload-your-photo-success/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/upload-your-photo-success/index.njk
index c97fed4bc3..0d56de00ac 100644
--- a/packages/govuk-frontend-review/src/views/full-page-examples/upload-your-photo-success/index.njk
+++ b/packages/govuk-frontend-review/src/views/full-page-examples/upload-your-photo-success/index.njk
@@ -24,18 +24,18 @@ scenario: |
 
 {% block header %}
   {{ govukHeader() }}
-  {{ govukServiceHeader({
-    serviceName: "Apply for a passport"
-  }) }}
-{% endblock %}
-
-{% block beforeContent %}
   {{ govukPhaseBanner({
     tag: {
       text: "Beta"
     },
     html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
   }) }}
+  {{ govukServiceHeader({
+    serviceName: "Apply for a passport"
+  }) }}
+{% endblock %}
+
+{% block beforeContent %}
   {{ govukBackLink({
     href: "/"
   }) }}
diff --git a/packages/govuk-frontend/src/govuk/components/header/_index.scss b/packages/govuk-frontend/src/govuk/components/header/_index.scss
index f9571058df..b0c646e70f 100644
--- a/packages/govuk-frontend/src/govuk/components/header/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/header/_index.scss
@@ -16,14 +16,13 @@
   .govuk-header {
     @include govuk-font($size: 16, $line-height: 1);
 
-    border-bottom: govuk-spacing(2) solid govuk-colour("white");
+    border-bottom: govuk-spacing(2) solid $govuk-header-border-color;
     color: $govuk-header-text;
     background: $govuk-header-background;
   }
 
   .govuk-header__container--full-width {
     padding: 0 govuk-spacing(3);
-    border-color: $govuk-header-border-color;
 
     .govuk-header__menu-button {
       right: govuk-spacing(3);
@@ -33,9 +32,7 @@
   .govuk-header__container {
     @include govuk-clearfix;
     position: relative;
-    margin-bottom: -$govuk-header-border-width;
     padding-top: govuk-spacing($govuk-header-vertical-spacing-value);
-    border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
   }
 
   .govuk-header__logotype {
diff --git a/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss b/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss
index 01eb779a31..c38e66227b 100644
--- a/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss
@@ -12,8 +12,9 @@
     @include govuk-font($size: 16);
     @include govuk-text-colour;
 
-    display: table;
-    margin: 0;
+    display: flex;
+    margin-top: 0;
+    margin-bottom: 0;
   }
 
   .govuk-phase-banner__content__tag {
diff --git a/packages/govuk-frontend/src/govuk/components/phase-banner/template.njk b/packages/govuk-frontend/src/govuk/components/phase-banner/template.njk
index 1fa39a8a4a..f4c27608d3 100644
--- a/packages/govuk-frontend/src/govuk/components/phase-banner/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/phase-banner/template.njk
@@ -4,7 +4,7 @@
 <div class="govuk-phase-banner
   {%- if params.classes %} {{ params.classes }}{% endif %}"
   {{- govukAttributes(params.attributes) }}>
-  <p class="govuk-phase-banner__content">
+  <p class="govuk-width-container govuk-phase-banner__content">
     {{ govukTag({
       text: params.tag.text,
       html: params.tag.html,