FCL-561 | fix header breakpoint layout issues

ds_judgements_public_ui/sass/includes/_header.scss

@@ -1,12 +1,22 @@
 .page-header {
-  &__flex-container-beta {
+  &__container {
     display: flex;
-    gap: $space-18;
     align-items: flex-end;
     justify-content: space-between;
-
     padding: $space-6 0;
 
+    @media only screen and (min-width: $grid-breakpoint-medium) {
+      gap: $space-8;
+    }
+
+    @media only screen and (min-width: $grid-breakpoint-large) {
+      gap: $space-10;
+    }
+
+    @media only screen and (min-width: $grid-breakpoint-extra-large) {
+      gap: $space-18;
+    }
+
     @media only screen and (max-width: $grid-breakpoint-medium) {
       flex-direction: column;
       gap: 0;
@@ -19,29 +29,29 @@
   }
 
   &__tna-logo {
-    width: 100px;
-    height: 100px;
+    width: 70px;
+    height: 70px;
 
-    @media only screen and (max-width: $grid-breakpoint-medium) {
-      width: 70px;
-      height: 70px;
+    @media only screen and (min-width: $grid-breakpoint-large) {
+      width: 100px;
+      height: 100px;
     }
   }
 
   &__tna-logo-link {
     display: inline-block;
-    width: 100px;
-    height: 100px;
+    width: 70px;
+    height: 70px;
 
     &:focus {
       @include focus-default;
 
       outline-color: colour-var("contrast-link");
     }
 
-    @media only screen and (max-width: $grid-breakpoint-medium) {
-      width: 70px;
-      height: 70px;
+    @media only screen and (min-width: $grid-breakpoint-large) {
+      width: 100px;
+      height: 100px;
     }
   }
 }

ds_judgements_public_ui/sass/includes/_service_introduction.scss

@@ -2,49 +2,52 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+
   width: 100%;
+  margin-top: $space-4;
+  margin-bottom: $space-2;
 
   &__header {
     display: flex;
     gap: $space-2;
     align-items: center;
 
     width: 100%;
-    margin: 0 $space-1;
+    margin: 0;
 
     font-family: $font-roboto;
-    font-size: $typography-2xl-text-size;
+    font-size: $typography-xl-text-size;
     font-weight: normal;
     line-height: $typography-md-line-height;
     color: colour-var("contrast-font-base");
     text-wrap: nowrap;
 
-    @media only screen and (max-width: $grid-breakpoint-small) {
-      margin: 0;
-      font-size: $typography-xl-text-size;
+    @media only screen and (min-width: $grid-breakpoint-large) {
+      margin: 0 $space-1;
+      font-size: $typography-2xl-text-size;
     }
   }
 
   &__helper-text {
     display: inline-block;
 
-    margin: 0 $space-1;
+    margin: 0;
 
     font-family: $font-roboto;
-    font-size: $typography-lg-text-size;
+    font-size: $typography-sm-text-size;
+    font-weight: bold;
     line-height: 1.6rem;
     color: $color-yellow;
     text-wrap: balance;
 
-    @media only screen and (max-width: $grid-breakpoint-medium) {
-      margin: 0;
-      font-size: $typography-sm-text-size;
-      font-weight: bold;
+    @media only screen and (min-width: $grid-breakpoint-large) {
+      margin: 0 $space-1;
+      font-size: $typography-lg-text-size;
+      font-weight: normal;
     }
   }
 
-  @media only screen and (max-width: $grid-breakpoint-medium) {
-    margin-top: $space-4;
-    margin-bottom: $space-2;
+  @media only screen and (min-width: $grid-breakpoint-medium) {
+    margin: 0;
   }
 }

ds_judgements_public_ui/templates/includes/header.html

@@ -0,0 +1,34 @@
+{% load navigation_tags %}
+<div class="page-header__container">
+  {% include "includes/logo.html" %}
+
+  <div class="service-introduction">
+    <span class="service-introduction__separator"></span>
+    <p class="service-introduction__header">Find Case Law<span class="phase-banner__beta-phase">Beta</span></p>
+    <p class="service-introduction__helper-text">Judgments and decisions from 2001 onwards</p>
+  </div>
+  <div class="govuk-header__content">
+    <nav aria-label="Menu" class="govuk-header__navigation">
+      <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
+        Menu
+      </button>
+      <ul id="navigation" class="govuk-header__navigation-list">
+        <li class="{% navigation_item_class 'home' %}">
+          <a class="govuk-header__link" title="Home" href="{% url 'home' %}">
+            Home
+          </a>
+        </li>
+        <li class="{% navigation_item_class 'about_this_service' %}">
+          <a class="govuk-header__link"  title="About" href="{% url 'about_this_service' %}">
+            About
+          </a>
+        </li>
+        <li class="{% navigation_item_class 'help_and_guidance' %}">
+          <a class="govuk-header__link" title="Help and guidance" href="{% url 'help_and_guidance' %}">
+            Help and guidance
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</div>

ds_judgements_public_ui/templates/layouts/base.html

@@ -45,39 +45,7 @@
       <header class="govuk-header" data-module="govuk-header">
         <a id="skip-to-main-content" href="#main-content">Skip to Main Content</a>
         <div class="container">
-          <div class="page-header__flex-container-beta">
-            {% include "includes/logo.html" %}
-
-            <div class="service-introduction">
-              <span class="service-introduction__separator"></span>
-              <p class="service-introduction__header">Find Case Law<span class="phase-banner__beta-phase">Beta</span></p>
-              <p class="service-introduction__helper-text">Judgments and decisions from 2001 onwards</p>
-            </div>
-            <div class="govuk-header__content">
-              <nav aria-label="Menu" class="govuk-header__navigation">
-                <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
-                  Menu
-                </button>
-                <ul id="navigation" class="govuk-header__navigation-list">
-                  <li class="{% navigation_item_class 'home' %}">
-                    <a class="govuk-header__link" title="Home" href="{% url 'home' %}">
-                      Home
-                    </a>
-                  </li>
-                  <li class="{% navigation_item_class 'about_this_service' %}">
-                    <a class="govuk-header__link"  title="About" href="{% url 'about_this_service' %}">
-                      About
-                    </a>
-                  </li>
-                  <li class="{% navigation_item_class 'help_and_guidance' %}">
-                    <a class="govuk-header__link" title="Help and guidance" href="{% url 'help_and_guidance' %}">
-                      Help and guidance
-                    </a>
-                  </li>
-                </ul>
-              </nav>
-            </div>
-          </div>
+          {% include "includes/header.html" %}
           {% block breadcrumbs %}
             {% include "includes/breadcrumbs.html" %}
           {% endblock breadcrumbs %}