fix: reserve space for Google search and remove slide-in animation

thostetler · thostetler · commit cf7c797e8611 · 2026-03-05T16:54:16.000-05:00
Add min-height to .search-bar-container in both _layout.scss and
help/common/css/styles.scss so the Google CSE widget has allocated
space before it loads, eliminating CLS on page navigation. Remove
the slideInDown animation that caused a visible fade-in on every
page load.
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -145,6 +145,10 @@ h3 {
   }
 }
 
+.search-bar-container {
+  min-height: 92px;
+}
+
 .search-bar-container *,
 .search-bar-container *:before,
 .search-bar-container *:after {
diff --git a/help/common/css/styles.scss b/help/common/css/styles.scss
@@ -1576,7 +1576,7 @@ $nav-text-color: $text-color;
   display: flex;
   justify-content: center;
   margin-bottom: 30px;
-  animation: slideInDown 1s ease-out;
+  min-height: 92px;
 }
 
 .search-bar {

Original file line number	Diff line number	Diff line change
`@@ -145,6 +145,10 @@ h3 {`
`145`	`145`	`}`
`146`	`146`	`}`
`147`	`147`
	`148`	`+.search-bar-container {`
	`149`	`+ min-height: 92px;`
	`150`	`+}`
	`151`	`+`
`148`	`152`	`.search-bar-container *,`
`149`	`153`	`.search-bar-container *:before,`
`150`	`154`	`.search-bar-container *:after {`
Original file line number	Diff line number	Diff line change
`@@ -1576,7 +1576,7 @@ $nav-text-color: $text-color;`
`1576`	`1576`	`display: flex;`
`1577`	`1577`	`justify-content: center;`
`1578`	`1578`	`margin-bottom: 30px;`
`1579`		`- animation: slideInDown 1s ease-out;`
	`1579`	`+ min-height: 92px;`
`1580`	`1580`	`}`
`1581`	`1581`
`1582`	`1582`	`.search-bar {`