fix(header-fdp/mobile): constrain service area to 90% width and proportionally scale graphic logo + text at mobile breakpoints\n\n- Limit .nhsuk-header__service to max-width: 90% on small screens\n- Use clamp() for service name font-size under FDP brand\n- Size graphic logo variant in em at mobile so it scales with text\n- Verified via CSS build and SSR tests (218 pass)

Author: Fergus Bisset

dist/components/Header/Header.css

@@ -650,6 +650,13 @@
 [data-brand=fdp] .nhsuk-header .nhsuk-header__service {
   justify-content: center;
 }
+@media (max-width: calc(768px - 1px)) {
+  [data-brand=fdp] .nhsuk-header .nhsuk-header__service {
+    max-width: 90%;
+    margin-inline: auto;
+    gap: 8px;
+  }
+}
 [data-brand=fdp] .nhsuk-header__container {
   padding-left: 32px;
   padding-right: 32px;
@@ -673,6 +680,24 @@
 }
 [data-brand=fdp] .nhsuk-header__service-name {
   font-size: 24px;
+  line-height: 1.1;
+}
+@media (max-width: calc(768px - 1px)) {
+  [data-brand=fdp] .nhsuk-header__service-name {
+    font-size: clamp(16px, 5vw, 20px);
+  }
+}
+@media (max-width: calc(768px - 1px)) {
+  [data-brand=fdp] .nhsuk-header__organisation-logo {
+    height: auto;
+    max-width: 90%;
+  }
+}
+@media (max-width: calc(768px - 1px)) {
+  [data-brand=fdp] .nhsuk-header__organisation-logo[data-logo-variant=graphic] {
+    width: 7.5em;
+    max-width: 90%;
+  }
 }
 [data-brand=fdp] .nhsuk-header__navigation-list {
   justify-content: space-evenly;

dist/components/Header/index.css

@@ -953,6 +953,14 @@ span .nhsuk-u-visually-hidden {
   justify-content: center;
 }
 
+@media (max-width: calc(768px - 1px)) {
+  [data-brand=fdp] .nhsuk-header .nhsuk-header__service {
+    max-width: 90%;
+    margin-inline: auto;
+    gap: 8px;
+  }
+}
+
 [data-brand=fdp] .nhsuk-header__container {
   padding-left: 32px;
   padding-right: 32px;
@@ -981,6 +989,27 @@ span .nhsuk-u-visually-hidden {
 
 [data-brand=fdp] .nhsuk-header__service-name {
   font-size: 24px;
+  line-height: 1.1;
+}
+
+@media (max-width: calc(768px - 1px)) {
+  [data-brand=fdp] .nhsuk-header__service-name {
+    font-size: clamp(16px, 5vw, 20px);
+  }
+}
+
+@media (max-width: calc(768px - 1px)) {
+  [data-brand=fdp] .nhsuk-header__organisation-logo {
+    height: auto;
+    max-width: 90%;
+  }
+}
+
+@media (max-width: calc(768px - 1px)) {
+  [data-brand=fdp] .nhsuk-header__organisation-logo[data-logo-variant=graphic] {
+    width: 7.5em;
+    max-width: 90%;
+  }
 }
 
 [data-brand=fdp] .nhsuk-header__navigation-list {