From d30d643a7bc1dd6ce7989529dc41f89c5d8a8e07 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Mon, 6 Mar 2023 09:27:38 +0200
Subject: [PATCH] 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     | 4 ++--
 .../themes/olivero/css/components/header-search-wide.pcss.css | 4 ++--
 core/themes/olivero/css/components/site-header.css            | 1 +
 core/themes/olivero/css/components/site-header.pcss.css       | 1 +
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/core/themes/olivero/css/components/header-search-wide.css b/core/themes/olivero/css/components/header-search-wide.css
index 1b82b424076..5cc12ab2ea5 100644
--- a/core/themes/olivero/css/components/header-search-wide.css
+++ b/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;
diff --git a/core/themes/olivero/css/components/header-search-wide.pcss.css b/core/themes/olivero/css/components/header-search-wide.pcss.css
index 61b153a5277..2fbd5c19988 100644
--- a/core/themes/olivero/css/components/header-search-wide.pcss.css
+++ b/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;
diff --git a/core/themes/olivero/css/components/site-header.css b/core/themes/olivero/css/components/site-header.css
index 77fe65972c0..767dcfa4eb6 100644
--- a/core/themes/olivero/css/components/site-header.css
+++ b/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));
diff --git a/core/themes/olivero/css/components/site-header.pcss.css b/core/themes/olivero/css/components/site-header.pcss.css
index 9eaf220761b..1ab7251194d 100644
--- a/core/themes/olivero/css/components/site-header.pcss.css
+++ b/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));