account for hidden footers, remove unnecessary rounding

.changeset/famous-chefs-repeat.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-js': patch
+---
+
+Fix bug where a hidden footer element would still register a height. Layout now always expects a header, but not necessarily a footer, since footers can be rendered within containers too.

.changeset/pink-lizards-check.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': patch
+---
+
+Stop accounting for rounding in calculations and remove -1px in the --atlas-contained-height property.

css/src/components/layout.scss

@@ -363,9 +363,8 @@ $default-flyout-width-widescreen: 480px;
 		&.layout-twin,
 		&.layout-sidecar-left,
 		&.layout-sidecar-right {
-			// 👇 minus a pixel at the end to account for percentage points and rounding
 			--atlas-contained-height: calc(
-				var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 1px
+				var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height)
 			);
 		}
 
@@ -389,9 +388,8 @@ $default-flyout-width-widescreen: 480px;
 // Because the holy grail has two rows (containing menu main, menu aside) on tablet, we cannot apply height constraints at that size
 @include desktop {
 	.layout.layout-constrained.layout-holy-grail {
-		// 👇 minus a pixel at the end to account for percentage points and rounding
 		--atlas-contained-height: calc(
-			var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 1px
+			var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height)
 		);
 
 		.layout-body-main,

js/src/behaviors/layout.ts

@@ -11,13 +11,21 @@ const setLayoutCssVariables = () => {
 	const visibleHeaderCssProp = `${visibleHeaderHeight}px`;
 
 	const footer = document.querySelector('.layout-body-footer');
-	const footerHeight = footer?.clientHeight || 0;
-	const footerCssProp = footerHeight ? `${footerHeight}px` : '0px';
-	const footerY = footer?.getBoundingClientRect().y || 0; // determine if header and footer are visible, assign visible heights as well
+	// get computed style of the footer to ensure it is not hidden
+	const footerHidden = footer && window.getComputedStyle(footer).display !== 'none';
+	let footerHeight = 0;
+	let footerCssProp = '0px';
+	let footerY = 0;
+	let visibleFooterHeight = window.innerHeight;
+	if (!footerHidden) {
+		footerHeight = footer?.clientHeight || 0;
+		footerCssProp = footerHeight ? `${footerHeight}px` : '0px';
+		footerY = footer?.getBoundingClientRect().y || 0; // determine if header and footer are visible, assign visible heights as well
 
-	const visibleFooterHeight = Math.round(
-		footerY < window.innerHeight ? Math.min(window.innerHeight - footerY, footerHeight) : 0
-	);
+		visibleFooterHeight = Math.round(
+			footerY < window.innerHeight ? Math.min(window.innerHeight - footerY, footerHeight) : 0
+		);
+	}
 	const visibleFooterCssProp = `${visibleFooterHeight}px`;
 
 	root.style.setProperty('--window-inner-height', `${window.innerHeight}px`, 'important');