From a400d59758ec62f06c32c1396992a9038b7456b9 Mon Sep 17 00:00:00 2001
From: Andrew Hosgood <andrew.hosgood@nationalarchives.gov.uk>
Date: Wed, 14 Feb 2024 10:30:31 +0000
Subject: [PATCH] Tweak header item sizings

---
 CHANGELOG.md                                  |  6 ++++++
 .../global-header/global-header.scss          |  2 ++
 .../components/header/header.scss             | 21 +++----------------
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 35208654..f643e7a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,9 +9,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 ### Changed
+
+- Changed spacing between navigation items in header
+
 ### Deprecated
 ### Removed
 ### Fixed
+
+- Stopped logo from shrinking with longer straplines in headers
+
 ### Security
 
 ## [0.1.38](https://github.com/nationalarchives/tna-frontend/compare/v0.1.37...v0.1.38) - 2024-02-13
diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss
index b2cd7158..639e8fc7 100644
--- a/src/nationalarchives/components/global-header/global-header.scss
+++ b/src/nationalarchives/components/global-header/global-header.scss
@@ -57,6 +57,8 @@
   .tna-logo {
     width: 6.75rem;
     height: 6.75rem;
+
+    flex-shrink: 0;
   }
 
   &__logo-strapline {
diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss
index 8089dd5b..06df8549 100644
--- a/src/nationalarchives/components/header/header.scss
+++ b/src/nationalarchives/components/header/header.scss
@@ -98,13 +98,7 @@
 
     display: inline-block;
 
-    // &__foreground {
-    //   @include colour.colour-fill("font-dark");
-    // }
-
-    // &__background {
-    //   fill: none;
-    // }
+    flex-shrink: 0;
   }
 
   &__logo-strapline {
@@ -132,8 +126,6 @@
 
     @include colour.colour-background("font-dark");
 
-    // transition: height 1ms 100ms;
-
     &::before,
     &::after {
       height: 0.25rem;
@@ -146,11 +138,6 @@
 
       background-color: inherit;
 
-      // transition:
-      //   top 100ms 100ms,
-      //   bottom 100ms 100ms,
-      //   transform 100ms;
-
       content: "";
     }
 
@@ -262,7 +249,7 @@
 
     display: flex;
     flex-wrap: nowrap;
-    gap: 0.75rem;
+    gap: 2rem;
 
     list-style: none;
 
@@ -273,7 +260,7 @@
   }
 
   &__navigation-item-link {
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 0;
 
     display: inline-block;
 
@@ -372,8 +359,6 @@
 
       justify-content: flex-start;
 
-      // @include colour.colour-background("page-background");
-
       @include colour.colour-border("keyline", 1px, solid, bottom);
     }