fix(UIShell): fix overlay issue with modal in content (#7891)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: tw15egan

packages/components/src/components/ui-shell/_content.scss

@@ -16,7 +16,6 @@
   .#{$prefix}--content {
     padding: 2rem;
     background: $ui-02;
-    transform: translate3d(0, 0, 0);
     will-change: margin-left;
   }
 

packages/components/src/components/ui-shell/_side-nav.scss

@@ -116,8 +116,9 @@
   }
 
   .#{$prefix}--side-nav__overlay {
-    position: absolute;
+    position: fixed;
     top: rem(48px);
+    left: 0;
     width: 0;
     height: 0;
     background-color: transparent;
@@ -128,7 +129,7 @@
 
   .#{$prefix}--side-nav__overlay-active {
     @include carbon--breakpoint-down('lg') {
-      width: 100%;
+      width: 100vw;
       height: 100vh;
       background-color: $overlay-01;
       opacity: 1;

packages/react/src/components/UIShell/SideNav.js

@@ -74,7 +74,7 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
 
   const overlayClassName = cx({
     [`${prefix}--side-nav__overlay`]: true,
-    [`${prefix}--side-nav__overlay-active`]: expanded,
+    [`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState,
   });
 
   let childrenToRender = children;

packages/react/src/components/UIShell/UIShell-story.js

@@ -11,7 +11,7 @@ import { Search20, Notification20, AppSwitcher20 } from '@carbon/icons-react';
 
 import { action } from '@storybook/addon-actions';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { withReadme } from 'storybook-readme';
 import readme from './README.md';
 import HeaderContainer from './HeaderContainer';
@@ -42,6 +42,9 @@ import {
   SwitcherItem,
   SwitcherDivider,
 } from '../UIShell';
+import Modal from '../Modal';
+import Button from '../Button';
+
 import mdx from './UIShell.mdx';
 
 SideNav.displayName = 'SideNav';
@@ -60,6 +63,7 @@ const Fade16 = () => (
 );
 
 const StoryContent = ({ useResponsiveOffset = true }) => {
+  const [open, setOpen] = useState(false);
   const classNameFirstColumn = cx({
     'bx--col-lg-13': true,
     'bx--offset-lg-3': useResponsiveOffset,
@@ -112,6 +116,20 @@ const StoryContent = ({ useResponsiveOffset = true }) => {
             on a page when using a side-nav, then the tabs are secondary in
             hierarchy to the side-nav.
           </p>
+          <Button onClick={() => setOpen(true)}>Launch modal</Button>
+          <Modal
+            modalHeading="Add a custom domain"
+            modalLabel="Account resources"
+            primaryButtonText="Add"
+            secondaryButtonText="Cancel"
+            open={open}
+            onRequestClose={() => setOpen(false)}>
+            <p style={{ marginBottom: '1rem' }}>
+              Custom domains direct requests for your apps in this Cloud Foundry
+              organization to a URL that you own. A custom domain can be a
+              shared domain, a shared subdomain, or a shared domain and host.
+            </p>
+          </Modal>
         </div>
       </div>
     </div>