From 79c60bf8a908d0b40c190bdbfb9722c618e5a0f6 Mon Sep 17 00:00:00 2001
From: sdrozdsap <163305268+sdrozdsap@users.noreply.github.com>
Date: Mon, 4 Nov 2024 10:10:34 +0000
Subject: [PATCH] fix: Prevent header links from wrapping and taking two lines
 (#19460)

---
 .../feature-toggles/config/feature-toggles.ts               | 6 ++++++
 .../src/app/spartacus/spartacus-features.module.ts          | 1 +
 projects/storefrontlib/layout/main/storefront.component.ts  | 1 +
 .../scss/components/layout/header/_header.scss              | 4 ++++
 4 files changed, 12 insertions(+)

diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
index b6163a2472e..be166c63d04 100644
--- a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
+++ b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -490,6 +490,11 @@ export interface FeatureTogglesInterface {
    */
   a11yFacetsDialogFocusHandling?: boolean;
 
+  /**
+   * `StorefrontComponent`: Prevents header links from wrapping on smaller screen sizes
+   */
+  headerLayoutForSmallerViewports?: boolean;
+
   /**
    * Enables radio group fieldset for 'CheckoutDeliveryModeComponent' form
    * and further improves its screen reader readout.
@@ -774,6 +779,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yNotificationsOnConsentChange: false,
   a11yDisabledCouponAndQuickOrderActionButtonsInsteadOfRequiredFields: false,
   a11yFacetsDialogFocusHandling: false,
+  headerLayoutForSmallerViewports: false,
   a11yStoreFinderAlerts: false,
   a11yFormErrorMuteIcon: false,
   a11yCxMessageFocus: false,
diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
index a7737fa0482..4897c27e229 100644
--- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
+++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -358,6 +358,7 @@ if (environment.cpq) {
         a11yDisabledCouponAndQuickOrderActionButtonsInsteadOfRequiredFields:
           true,
         a11yFacetsDialogFocusHandling: true,
+        headerLayoutForSmallerViewports: true,
         a11yStoreFinderAlerts: true,
         a11yFormErrorMuteIcon: true,
         a11yCxMessageFocus: true,
diff --git a/projects/storefrontlib/layout/main/storefront.component.ts b/projects/storefrontlib/layout/main/storefront.component.ts
index 8bd99b7b6ae..9e20cd458d8 100644
--- a/projects/storefrontlib/layout/main/storefront.component.ts
+++ b/projects/storefrontlib/layout/main/storefront.component.ts
@@ -81,6 +81,7 @@ export class StorefrontComponent implements OnInit, OnDestroy {
   ) {
     useFeatureStyles('a11yImproveContrast');
     useFeatureStyles('cmsBottomHeaderSlotUsingFlexStyles');
+    useFeatureStyles('headerLayoutForSmallerViewports');
   }
 
   ngOnInit(): void {
diff --git a/projects/storefrontstyles/scss/components/layout/header/_header.scss b/projects/storefrontstyles/scss/components/layout/header/_header.scss
index b1b4e70cc9d..41558212221 100644
--- a/projects/storefrontstyles/scss/components/layout/header/_header.scss
+++ b/projects/storefrontstyles/scss/components/layout/header/_header.scss
@@ -207,6 +207,10 @@ $space: 0.5rem;
     .SiteLinks {
       justify-content: flex-end;
       color: var(--cx-color-primary);
+
+      @include forFeature('headerLayoutForSmallerViewports') {
+        flex-wrap: nowrap;
+      }
     }
 
     .SiteLogin {