move flyout to be under the header (#694)

* move flyout to be under the header * fix bug
microsoft · Oct 8, 2024 · dfc0a22 · dfc0a22
1 parent 6f5e920
commit dfc0a22
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 17 deletions.
diff --git a/.changeset/green-lobsters-wave.md b/.changeset/green-lobsters-wave.md
@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': patch
+---
+
+Flyout to render under the header and footer not adjacent to them.
diff --git a/css/src/components/layout.scss b/css/src/components/layout.scss
@@ -101,7 +101,7 @@ $default-flyout-width-widescreen: 480px;
 	&.layout-flyout-active .layout-body {
 		@include desktop {
 			grid-template: auto auto auto 1fr auto auto / minmax(0, 1fr) var(#{$layout-flyout-width-name});
-			grid-template-areas: 'header flyout' 'hero flyout' 'menu flyout' 'main flyout' 'aside flyout' 'footer flyout';
+			grid-template-areas: 'header header' 'hero flyout' 'menu flyout' 'main flyout' 'aside flyout' 'footer footer';
 		}
 	}
 }
@@ -152,21 +152,21 @@ $default-flyout-width-widescreen: 480px;
 				auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)
 				var(#{$layout-flyout-width-name});
 			grid-template-areas:
-				'header header header flyout'
+				'header header header header'
 				'hero hero hero flyout'
 				'menu main aside flyout'
-				'footer footer footer flyout';
+				'footer footer footer footer';
 		}
 
 		@include widescreen {
 			grid-template:
 				auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)
 				var(#{$layout-flyout-width-name});
 			grid-template-areas:
-				'header header header flyout'
+				'header header header header'
 				'hero hero hero flyout'
 				'menu main aside flyout'
-				'footer footer footer flyout';
+				'footer footer footer footer';
 		}
 	}
 }
@@ -214,20 +214,20 @@ $default-flyout-width-widescreen: 480px;
 					#{$layout-flyout-width-name}
 				);
 			grid-template-areas:
-				'header header flyout'
+				'header header header'
 				'hero hero flyout'
 				'menu main flyout'
-				'footer footer flyout';
+				'footer footer footer';
 		}
 		@include widescreen {
 			grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 3fr) var(
 					#{$layout-flyout-width-name}
 				);
 			grid-template-areas:
-				'header header flyout'
+				'header header header'
 				'hero hero flyout'
 				'menu main flyout'
-				'footer footer flyout';
+				'footer footer footer';
 		}
 	}
 }
@@ -275,21 +275,21 @@ $default-flyout-width-widescreen: 480px;
 					#{$layout-flyout-width-name}
 				);
 			grid-template-areas:
-				'header header flyout'
+				'header header header'
 				'hero hero flyout'
 				'main aside flyout'
-				'footer footer flyout';
+				'footer footer footer';
 		}
 
 		@include widescreen {
 			grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(0, 1fr) var(
 					#{$layout-flyout-width-name}
 				);
 			grid-template-areas:
-				'header header flyout'
+				'header header header'
 				'hero hero flyout'
 				'main aside flyout'
-				'footer footer flyout';
+				'footer footer footer';
 		}
 	}
 }
@@ -320,10 +320,10 @@ $default-flyout-width-widescreen: 480px;
 					#{$layout-flyout-width-name}
 				);
 			grid-template-areas:
-				'header header flyout'
+				'header header header'
 				'hero hero flyout'
 				'main aside flyout'
-				'footer footer flyout';
+				'footer footer footer';
 		}
 	}
 }

diff --git a/css/src/tokens/layout.scss b/css/src/tokens/layout.scss
@@ -8,8 +8,9 @@ $reading-max-width: 50rem !default;
 
 $layout-gap: 24px !default;
 $layout-widescreen-width: $breakpoint-widescreen - $layout-gap * 2 !default;
-$layout-widescreen-gap: calc(
-	50% - #{$layout-widescreen-width} / 2
+$layout-widescreen-gap: max(
+	$layout-gap,
+	calc(50% - #{$layout-widescreen-width} / 2)
 ) !default; // $layout-widescreen-gap is a naming error, keeping for backwards compat
 
 $layout-gap-custom-property-name: '--layout-gap' !default;