From ff8462d5be8dbc577a867cb161dcedf3da84719e Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Fri, 5 Feb 2021 16:24:11 -0500
Subject: [PATCH 1/2] fix(megamenu): fix alignment issues in mobile nav on
 mobile devices

---
 .../masthead/_masthead-leftnav.scss           | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/styles/scss/components/masthead/_masthead-leftnav.scss b/packages/styles/scss/components/masthead/_masthead-leftnav.scss
index 676a612bec7..46ae78838c0 100644
--- a/packages/styles/scss/components/masthead/_masthead-leftnav.scss
+++ b/packages/styles/scss/components/masthead/_masthead-leftnav.scss
@@ -145,23 +145,17 @@
         @include carbon--type-style(body-short-02);
 
         color: $text-01;
+        width: 100%;
+        text-overflow: ellipsis;
       }
     }
   }
 
   .#{$prefix}--side-nav__submenu {
-    display: flex;
-    flex-direction: column;
-
     .#{$prefix}--side-nav__submenu-content {
       width: 100%;
-      height: 100%;
+      height: rem(48px);
       display: flex;
-    }
-
-    &::after {
-      content: '';
-      width: 100%;
       border-bottom: 1px solid $ui-03;
     }
 
@@ -304,7 +298,7 @@
     width: 100%;
 
     .#{$prefix}--side-nav__link-text {
-      align-self: end;
+      align-self: start;
       margin-top: auto;
     }
 
@@ -332,10 +326,11 @@
     border-bottom: none;
   }
 
-  .#{$prefix}--masthead__side-nav__last-highlighted,
-  :host(#{$dds-prefix}-left-nav-menu[last-highlighted]) {
-    .#{$prefix}--side-nav__submenu::after {
-      content: none;
+  :host(#{$dds-prefix}-left-nav-menu[last-highlighted])
+    .#{$prefix}--side-nav__submenu,
+  .#{$prefix}--masthead__side-nav__last-highlighted {
+    .#{$prefix}--side-nav__submenu-content {
+      border-bottom: none;
     }
   }
 

From 08f7121a0d82fc6133abdf8eec9e15b5ffd663e9 Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Fri, 5 Feb 2021 16:28:57 -0500
Subject: [PATCH 2/2] fix(megamenu): combine styles

---
 .../scss/components/masthead/_masthead-leftnav.scss | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/styles/scss/components/masthead/_masthead-leftnav.scss b/packages/styles/scss/components/masthead/_masthead-leftnav.scss
index 46ae78838c0..da4348bb4c5 100644
--- a/packages/styles/scss/components/masthead/_masthead-leftnav.scss
+++ b/packages/styles/scss/components/masthead/_masthead-leftnav.scss
@@ -316,6 +316,11 @@
     border-bottom: 1px solid $ui-04;
   }
 
+  :host(#{$dds-prefix}-left-nav-menu[last-highlighted])
+    .#{$prefix}--side-nav__submenu
+    .#{$prefix}--side-nav__submenu-content,
+  .#{$prefix}--masthead__side-nav__last-highlighted
+    .#{$prefix}--side-nav__submenu-content,
   .#{$prefix}--side-nav__menu-item.#{$prefix}--masthead__side-nav__last-highlighted
     .#{$prefix}--side-nav__link::after,
   :host(dds-left-nav-menu)
@@ -326,14 +331,6 @@
     border-bottom: none;
   }
 
-  :host(#{$dds-prefix}-left-nav-menu[last-highlighted])
-    .#{$prefix}--side-nav__submenu,
-  .#{$prefix}--masthead__side-nav__last-highlighted {
-    .#{$prefix}--side-nav__submenu-content {
-      border-bottom: none;
-    }
-  }
-
   .#{$prefix}--side-nav__submenu-platform {
     flex-direction: row;