Tweak header item sizings

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

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 {

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);
     }