From ed046e160fa4dee1456f5bf4862eb524f577a94c Mon Sep 17 00:00:00 2001
From: Michael Webber <mawebbe1@asu.edu>
Date: Thu, 23 Jul 2026 17:37:46 -0700
Subject: [PATCH] fix(component-header-footer): fixed large headers not
 wrapping on smaller screens

---
 .../HeaderMain/Title/index.styles.js           |  2 +-
 .../src/header/index.stories.js                | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/component-header-footer/src/header/components/HeaderMain/Title/index.styles.js b/packages/component-header-footer/src/header/components/HeaderMain/Title/index.styles.js
index 1c1e59b1f5..d404f48ae0 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/Title/index.styles.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/Title/index.styles.js
@@ -15,7 +15,7 @@ const TitleWrapper = styled.div`
   letter-spacing: -1px;
   display: inline-block;
   margin: 0;
-  width: max-content;
+  width: fit-content;
 
   &.active {
     background-position: -200%;
diff --git a/packages/component-header-footer/src/header/index.stories.js b/packages/component-header-footer/src/header/index.stories.js
index fe3a49a121..c6f5966cde 100644
--- a/packages/component-header-footer/src/header/index.stories.js
+++ b/packages/component-header-footer/src/header/index.stories.js
@@ -121,7 +121,7 @@ Default.args = {
   loggedIn: false,
   userName: "",
   navTree: basicNavTree,
-  title: "Subdomain name",
+  title: "Subdomain name Lorem ipsum dolor sit amet, consectetur adipiscing elit",
   breakpoint: "Lg",
   searchUrl: "https://search.asu.edu/search",
   site: "subdomain",
@@ -133,7 +133,7 @@ Empty.args = {};
 
 export const NoNavigation = Template.bind({});
 NoNavigation.args = {
-  title: "Subdomain name",
+  title: "Subdomain name Lorem ipsum dolor sit amet, consectetur adipiscing elit",
   loggedIn: true,
   userName: "Sparky",
   logoutLink: "/caslogout",
@@ -144,7 +144,7 @@ NoNavigation.args = {
 
 export const NoNavigationWithButtons = Template.bind({});
 NoNavigationWithButtons.args = {
-  title: "Subdomain name",
+  title: "Subdomain name Lorem ipsum dolor sit amet, consectetur adipiscing elit",
   buttons: [
     {
       href: "/",
@@ -172,7 +172,7 @@ BreakpointXL.args = {
   logoutLink: "/caslogout",
   loginLink: "/cas",
   navTree: basicNavTree,
-  title: "Subdomain name",
+  title: "Subdomain name Lorem ipsum dolor sit amet, consectetur adipiscing elit",
   parentOrg: "Parent unit name",
   parentOrgUrl: "https://engineering.asu.edu",
   breakpoint: "Xl",
@@ -188,7 +188,7 @@ WithMobileNavTree.args = {
   loginLink: "/cas",
   navTree: basicNavTree,
   mobileNavTree,
-  title: "Subdomain name",
+  title: "Subdomain name Lorem ipsum dolor sit amet, consectetur adipiscing elit",
   parentOrg: "Parent unit name",
   parentOrgUrl: "https://engineering.asu.edu",
   breakpoint: "Xl",
@@ -199,7 +199,7 @@ WithMobileNavTree.args = {
 export const WithButtons = Template.bind({});
 WithButtons.args = {
   navTree: navTreeWithButtons,
-  title: "Subdomain name",
+  title: "Subdomain name Lorem ipsum dolor sit amet, consectetur adipiscing elit",
   buttons: [
     {
       href: "/",
@@ -224,7 +224,7 @@ WithButtons.args = {
 export const WithMenuColumns = Template.bind({});
 WithMenuColumns.args = {
   navTree: navTreeMega,
-  title: "Subdomain name",
+  title: "Subdomain name Lorem ipsum dolor sit amet, consectetur adipiscing elit",
   parentOrg: "Parent unit name",
   parentOrgUrl: "https://engineering.asu.edu",
   loggedIn: true,
@@ -238,7 +238,7 @@ WithMenuColumns.args = {
 export const ExpandOnHover = Template.bind({});
 ExpandOnHover.args = {
   navTree: navTreeMega,
-  title: "Subdomain name",
+  title: "Subdomain name Lorem ipsum dolor sit amet, consectetur adipiscing elit",
   parentOrg: "Parent unit name",
   parentOrgUrl: "https://engineering.asu.edu",
   loggedIn: true,
@@ -263,7 +263,7 @@ Partner.args = {
 
 export const AnimatedTitle = AnimatedTitleTemplate.bind({});
 AnimatedTitle.args = {
-  title: "Subdomain name",
+  title: "Subdomain name Lorem ipsum dolor sit amet, consectetur adipiscing elit",
   navTree: basicNavTree,
   loggedIn: false,
   logoutLink: "/caslogout",