Fix overlap with AlertBanner on mobile (#2343)

hashicorp · Feb 16, 2024 · e47c785 · e47c785
1 parent 3958d50
commit e47c785
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/components/mobile-menu-container/mobile-menu-container.module.css b/src/components/mobile-menu-container/mobile-menu-container.module.css
@@ -20,9 +20,14 @@
 	left: -150vw;
 	overflow-y: auto;
 	position: fixed;
-	top: var(--sticky-bars-height);
 	width: 100%;
 	z-index: 2;
+	@media (--dev-dot-show-mobile-menu) {
+		top: auto;
+	}
+	@media (--dev-dot-hide-mobile-menu) {
+		top: var(--sticky-bars-height);
+	}
 }
 
 .mobileAuthenticationControlsWrap {

diff --git a/src/layouts/base-layout/index.tsx b/src/layouts/base-layout/index.tsx
@@ -56,10 +56,7 @@ const BaseLayout = ({
 	return (
 		<CommandBarProvider>
 			{alertBannerData.enabled && (
-				<AlertBanner
-					{...(alertBannerData.data as AlertBannerProps)}
-					hideOnMobile
-				/>
+				<AlertBanner {...(alertBannerData.data as AlertBannerProps)} />
 			)}
 			<CoreDevDotLayoutWithTheme>
 				<div className={classNames(s.root, className)} data-layout="base-new">