Allow service name to wrap when header is inline

Author: colinrotherham

packages/nhsuk-frontend/src/nhsuk/components/header/_index.scss

@@ -124,6 +124,7 @@ $nhsuk-header-reverse-item-active-colour: $nhsuk-reverse-text-colour;
     display: flex;
 
     .nhsuk-header__container--inline & {
+      flex-basis: 50%;
       flex-grow: 999;
     }
 
@@ -203,6 +204,7 @@ $nhsuk-header-reverse-item-active-colour: $nhsuk-reverse-text-colour;
 
   .nhsuk-header__account {
     flex-grow: 1;
+    flex-shrink: 0;
 
     margin-top: nhsuk-spacing(3);
 

packages/nhsuk-frontend/src/nhsuk/components/header/fixtures.mjs

@@ -115,13 +115,12 @@ export const examples = {
   'with account inline (logged in)': {
     context: {
       containerClasses: 'nhsuk-header__container--inline',
+      service: {
+        text: 'Get a self-test kit for HIV',
+        href: '#'
+      },
       account: {
         items: [
-          {
-            href: '#',
-            text: 'Account',
-            icon: true
-          },
           {
             action: '#',
             text: 'Log out'
@@ -156,6 +155,10 @@ export const examples = {
   'with account inline (logged out)': {
     context: {
       containerClasses: 'nhsuk-header__container--inline',
+      service: {
+        text: 'Get a self-test kit for HIV',
+        href: '#'
+      },
       account: {
         items: [
           {