From fae8aa3c6ff7b235d77cf8f84837477897ca8594 Mon Sep 17 00:00:00 2001 From: Kristin Bradley Date: Fri, 15 Aug 2025 11:00:44 -0700 Subject: [PATCH] HDS-5304 Change media queries controlling sticky header behavior in AppFrame to use older syntax --- .changeset/hungry-months-kick.md | 5 +++++ packages/components/src/styles/components/app-frame.scss | 8 ++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) create mode 100644 .changeset/hungry-months-kick.md diff --git a/.changeset/hungry-months-kick.md b/.changeset/hungry-months-kick.md new file mode 100644 index 00000000000..6360bfeb484 --- /dev/null +++ b/.changeset/hungry-months-kick.md @@ -0,0 +1,5 @@ +--- +"@hashicorp/design-system-components": patch +--- + +`AppFrame` - Changed media query styles for frame header and sidebar containers to use level 3 vs level 4 CSS syntax diff --git a/packages/components/src/styles/components/app-frame.scss b/packages/components/src/styles/components/app-frame.scss index 5db0c949f64..fd19e60e26f 100644 --- a/packages/components/src/styles/components/app-frame.scss +++ b/packages/components/src/styles/components/app-frame.scss @@ -25,7 +25,9 @@ grid-area: header; // Make header position sticky/fixed if the viewport height is greater than 480px - @media (height >= 480px) { + // Note: HCP in prod doesn't support newer media queries, so we use the old syntax + // stylelint-disable-next-line media-feature-range-notation + @media (min-height: 480px) { position: sticky; top: 0; right: 0; @@ -42,7 +44,9 @@ min-height: 100vh; // Modify sidenav layout when used together with fixed app-header - @media (height >= 480px) { + // Note: HCP in prod doesn't support newer media queries, so we use the old syntax + // stylelint-disable-next-line media-feature-range-notation + @media (min-height: 480px) { .hds-app-frame--has-header-with-sidebar & { top: var(--token-app-header-height); height: calc(100vh - var(--token-app-header-height));