fix: long links wrapping behind header (#124)

__tests__/headers/SiteHeader.test.tsx

@@ -54,7 +54,7 @@ describe("<SiteHeader>", () => {
     expect(getByText("We're just getting started. We'd love to get your feedback.")).toBeTruthy()
     expect(getByText("Listings")).toBeTruthy()
     expect(getByText("Get Assistance")).toBeTruthy()
-    expect(getByText("My Account")).toBeTruthy()
+    expect(getByText("Account")).toBeTruthy()
     expect(queryByText("My Dashboard")).toBeNull()
     expect(queryByText("My Applications")).toBeNull()
     expect(queryByText("Account Settings")).toBeNull()

src/headers/SiteHeader.scss

@@ -9,11 +9,14 @@
   --base-max-height: 75px;
   --base-mobile-padding: inherit;
   --base-mobile-width: 1025px;
+  --base-desktop-wrap: wrap;
+  --base-mobile-wrap: initial;
   --border-color: var(--bloom-color-gray-450);
   --container-border: none;
   --notice-text-font-size: var(--bloom-font-size-xs);
   --notice-display-mobile: block;
   --notice-display-desktop: block;
+  --wrapped-background-color: var(--bloom-color-gray-200);
 
   // Logo
   --logo-background-color: var(--bloom-color-white);
@@ -58,13 +61,15 @@
   --logo-width-slim: 100px;
 
   // Link
-  --link-align-items: flex-end;
+  --link-align-items-wrapped: center;
+  --link-align-items-inline: flex-end;
   --link-bottom-border: 3px solid transparent;
   --link-font-size: var(--bloom-font-size-xs);
   --link-font-weight: 400;
   --link-height: 100%;
   --link-hover-bottom-border: 3px solid var(--bloom-color-primary);
-  --link-padding: var(--bloom-s1) var(--bloom-s3) var(--bloom-s4) var(--bloom-s3);
+  --link-padding-wrapped: var(--bloom-s2) var(--bloom-s3);
+  --link-padding-inline: var(--bloom-s1) var(--bloom-s3) var(--bloom-s3) var(--bloom-s3);
   --link-text-color: var(--bloom-color-gray-750);
   --link-text-hover-color: var(--bloom-color-gray-750);
   --link-text-desktop-color: var(--bloom-color-gray-750);
@@ -73,8 +78,7 @@
   // Dropdown
   --dropdown-container-border-top: none;
   --dropdown-container-display: inherit;
-  --dropdown-container-margin: 38.5px 0 0 -127px;
-  --dropdown-container-width: 143px;
+  --dropdown-container-top-offset: 75px;
   --dropdown-item-flex: inherit;
   --dropdown-item-font-size: var(--bloom-font-size-sm);
   --mobile-dropdown-item-font-size: var(--bloom-font-size-sm);
@@ -92,11 +96,12 @@
   --navbar-menu-desktop-margin: inherit;
   --navbar-menu-desktop-padding: inherit;
   --navbar-menu-desktop-width: inherit;
-  --navbar-menu-min-width: 110px;
+  --navbar-menu-min-width: inherit;
   --navbar-menu-mobile-height: inherit;
   --navbar-menu-mobile-margin: inherit;
   --navbar-menu-mobile-padding: inherit;
   --navbar-menu-mobile-width: inherit;
+  --navbar-menu-wrap: inherit;
 }
 
 .site-header__mobile-dropdown-container {
@@ -191,18 +196,31 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  flex-wrap: var(--base-mobile-wrap);
   z-index: 10;
   max-width: 100%;
   align-items: var(--base-align-items);
   padding: var(--base-mobile-padding);
   width: var(--base-mobile-width);
 
   @media (min-width: $screen-md) {
+    flex-wrap: var(--base-desktop-wrap);
     padding: var(--base-desktop-padding);
     width: var(--base-desktop-width);
   }
 }
 
+.site-header__base-wrapped {
+  margin-top: 0.2rem;
+  margin-bottom: var(--bloom-s12);
+  padding-left: 0;
+}
+
+.site-header__base-inline {
+  margin-top: 0.025rem;
+  margin-bottom: 0;
+}
+
 .site-header__logo-container {
   display: flex;
   align-items: center;
@@ -212,9 +230,9 @@
   padding: var(--logo-container-padding-mobile);
 
   @media (min-width: $screen-md) {
+    flex-grow: 0;
     padding: var(--logo-container-padding-desktop);
     flex-shrink: 0;
-    flex-grow: initial;
   }
 }
 
@@ -334,6 +352,8 @@
 .site-header__navbar-menu {
   display: flex;
   justify-content: flex-end;
+  flex-basis: inherit;
+  flex-grow: 0;
 
   min-width: var(--navbar-menu-min-width);
   height: var(--navbar-menu-mobile-height);
@@ -342,6 +362,8 @@
   padding: var(--navbar-menu-mobile-padding);
 
   @media (min-width: $screen-md) {
+    flex-basis: var(--navbar-menu-wrap);
+    flex-grow: 1;
     height: var(--navbar-menu-desktop-height);
     margin: var(--navbar-menu-desktop-margin);
     width: var(--navbar-menu-desktop-width);
@@ -403,8 +425,33 @@
   }
 }
 
-.site-header__dropdown-title {
-  flex-shrink: 0;
+.site-header__dropdown-title-with-icon {
+  display: inline-flex;
+}
+
+.site-header__dropdown-title-split {
+  padding-right: var(--bloom-s1);
+}
+
+.site-header__navbar-wrapped {
+  background-color: var(--wrapped-background-color);
+  justify-content: flex-start;
+  margin-top: var(--bloom-s3);
+  padding-left: var(--bloom-s2);
+  .site-header__link {
+    align-items: var(--link-align-items-wrapped);
+    padding: var(--link-padding-wrapped);
+  }
+}
+
+.site-header__navbar-inline {
+  background-color: var(--background-color);
+  justify-content: flex-end;
+
+  .site-header__link {
+    align-items: var(--link-align-items-inline);
+    padding: var(--link-padding-inline);
+  }
 }
 
 .site-header__link {
@@ -414,9 +461,11 @@
   height: var(--link-height);
   padding: var(--link-padding);
   display: flex;
-  align-items: var(--link-align-items);
   font-weight: var(--link-font-weight);
   border-bottom: var(--link-bottom-border);
+  flex-shrink: 1;
+  text-align: center;
+  position: relative;
 
   @media (min-width: 840px) {
     padding-right: var(--bloom-s4);
@@ -442,10 +491,12 @@
 .site-header__dropdown-container {
   background-color: var(--bloom-color-white);
   position: absolute;
-  margin: var(--dropdown-container-margin);
+  right: 0;
+  top: var(--dropdown-container-top-offset);
   border: 1px solid var(--border-color);
   border-top: var(--dropdown-container-border-top);
-  width: var(--dropdown-container-width);
+  min-width: 100%;
+  width: max-content;
   display: var(--dropdown-container-display);
 }
 
@@ -467,6 +518,7 @@
   text-align: left;
   width: 100%;
   flex: var(--dropdown-item-flex);
+  word-break: break-word;
 
   &:hover,
   &:focus {

src/headers/SiteHeader.stories.tsx

@@ -373,15 +373,19 @@ export const DAHLIAToggleSet = () => (
     dropdownItemClassName={"text-2xs"}
     menuLinks={[
       {
-        title: "Some longer links",
+        title: "Rent",
         href: "/",
       },
       {
-        title: "Some longer links",
+        title: "Buy",
         href: "/",
       },
       {
-        title: "Some longer links",
+        title: "My Favorites",
+        href: "/",
+      },
+      {
+        title: "Get Assistance",
         href: "/",
       },
       {
@@ -416,3 +420,74 @@ export const DAHLIAToggleSet = () => (
     ]}
   />
 )
+
+export const LongLinks = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    notice="We'd love to get your feedback."
+    logoWidth={"medium"}
+    title="Alameda County Housing Portal"
+    logoSrc="/images/logo_glyph.svg"
+    menuLinks={[
+      {
+        title: "Excepteur",
+        href: "/",
+      },
+      {
+        title: "Voluptate",
+        href: "/",
+      },
+      {
+        title: "Reprehenderit",
+        href: "/",
+      },
+      {
+        title: "Ut labore et dolore",
+        subMenuLinks: [
+          {
+            title: "Consectetur adipiscing elit",
+            href: "/account/dashboard",
+          },
+          {
+            title: "My Applications",
+            href: "/account/dashboard",
+          },
+          {
+            title: "Account Settings",
+            href: "/account/edit",
+          },
+          {
+            title: "Sign Out",
+            onClick: () => {},
+          },
+        ],
+      },
+      {
+        title: "Nostrud exercitation",
+        subMenuLinks: [
+          {
+            title: "My Dashboard",
+            href: "/account/dashboard",
+          },
+          {
+            title: "My Applications",
+            href: "/account/dashboard",
+          },
+          {
+            title: "Account Settings",
+            href: "/account/edit",
+          },
+          {
+            title: "Sign Out",
+            onClick: () => {},
+          },
+        ],
+      },
+    ]}
+  />
+)