Issue #3209742 by andy-blum: Olivero: Search bar jumps when header slides in and out of view

core/themes/olivero/css/components/header-search-wide.css

@@ -20,11 +20,11 @@
   position: absolute;
   z-index: 1; /* Ensure left border shows above social region in IE11. */
   inset-block-start: 100%;
-  inset-inline-start: 0;
+  inset-inline-start: calc(-1 * var(--content-left));
   display: none;
   visibility: hidden;
   overflow: hidden;
-  width: 100vw;
+  width: calc(100% + var(--content-left));
   max-width: var(--max-bg-color);
   height: var(--sp8);
   max-height: 0;

core/themes/olivero/css/components/header-search-wide.pcss.css

@@ -14,11 +14,11 @@
   position: absolute;
   z-index: 1; /* Ensure left border shows above social region in IE11. */
   inset-block-start: 100%;
-  inset-inline-start: 0;
+  inset-inline-start: calc(-1 * var(--content-left));
   display: none;
   visibility: hidden;
   overflow: hidden;
-  width: 100vw;
+  width: calc(100% + var(--content-left));
   max-width: var(--max-bg-color);
   height: var(--sp8);
   max-height: 0;

core/themes/olivero/css/components/site-header.css

@@ -59,6 +59,7 @@
 }
 
 .site-header__inner {
+  position: relative;
   z-index: 1; /* Appear in front of Drupal's tabs. */
   flex-grow: 1;
   width: calc(100vw - var(--content-left) - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));

core/themes/olivero/css/components/site-header.pcss.css

@@ -55,6 +55,7 @@
 }
 
 .site-header__inner {
+  position: relative;
   z-index: 1; /* Appear in front of Drupal's tabs. */
   flex-grow: 1;
   width: calc(100vw - var(--content-left) - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));