From c8402d25ebfc190a446b16e37a5571df7b592bf2 Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Mon, 8 Feb 2021 09:03:39 -0500
Subject: [PATCH] fix(megamenu): fix alignment issues in mobile nav (#5112)

### Related Ticket(s)

React & Web component: Mega Menu - Hamburger menu options are not left aligned and divider lines are missing. #5079

### Description

BEFORE:
<img width="409" alt="Screen Shot 2021-02-05 at 4 18 47 PM" src="https://user-images.githubusercontent.com/54281166/107090920-eb16dc80-67ce-11eb-87d1-05b025535dda.png">

AFTER:
<img width="415" alt="Screen Shot 2021-02-05 at 3 56 45 PM" src="https://user-images.githubusercontent.com/54281166/107090929-ee11cd00-67ce-11eb-9bda-3370155643bc.png">

### Changelog
**Changed**

- set border-bottom and height for submenus
- set text to show ellipsis when overflow in menu item links

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../masthead/_masthead-leftnav.scss           | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/packages/styles/scss/components/masthead/_masthead-leftnav.scss b/packages/styles/scss/components/masthead/_masthead-leftnav.scss
index 676a612bec7..da4348bb4c5 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;
     }
 
@@ -322,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)
@@ -332,13 +331,6 @@
     border-bottom: none;
   }
 
-  .#{$prefix}--masthead__side-nav__last-highlighted,
-  :host(#{$dds-prefix}-left-nav-menu[last-highlighted]) {
-    .#{$prefix}--side-nav__submenu::after {
-      content: none;
-    }
-  }
-
   .#{$prefix}--side-nav__submenu-platform {
     flex-direction: row;