From c31f7b18ee4eb0571712c08b1f44d27d16967106 Mon Sep 17 00:00:00 2001
From: Alona Zherdetska <alionazhv@gmail.com>
Date: Fri, 7 Feb 2025 18:05:05 +0100
Subject: [PATCH 1/2] chore(styles): fixed height of the header

---
 .../src/components/post-header/post-header.scss    |  7 ++++---
 .../src/components/post-header/post-header.tsx     | 14 ++++++++------
 .../post-mainnavigation/post-mainnavigation.scss   |  1 +
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
index 39dfa9afac..efed7dc21e 100644
--- a/packages/components/src/components/post-header/post-header.scss
+++ b/packages/components/src/components/post-header/post-header.scss
@@ -18,6 +18,7 @@
 
   z-index: 1020;
   position: relative;
+  height: var(--header-height);
 
   @include media.min(lg) {
     --global-header-reduced-height: 24px;
@@ -113,13 +114,13 @@ slot[name='post-logo'] {
 .local-header {
   display: flex;
   position: sticky;
+  box-sizing: border-box;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: var(--post-core-dimension-8);
+  gap: var(--post-core-dimension-4);
   min-height: var(--local-header-min-height);
   background: var(--post-core-color-brand-white);
-  transition: box-shadow 0.2s ease-in-out; 
 
   @include media.min(lg) {
     z-index: 3;
@@ -127,7 +128,6 @@ slot[name='post-logo'] {
       -1 * (var(--local-header-height) - var(--main-navigation-height)) + var(--global-header-reduced-height)
     );
     padding-block-start: var(--post-core-dimension-18);
-    box-shadow: var(--post-core-elevation-3);
   }
 
   @include media.max(lg) {
@@ -170,6 +170,7 @@ slot[name='post-logo'] {
   }
 
   @include media.min(lg) {
+    line-height: 34px !important;
     font-size: var(--post-core-font-size-28) !important;
   }
 
diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
index ad9e7c550d..37fa1ef4ff 100644
--- a/packages/components/src/components/post-header/post-header.tsx
+++ b/packages/components/src/components/post-header/post-header.tsx
@@ -42,12 +42,14 @@ export class PostHeader {
   private throttledResize = throttle(50, () => this.handleResize());
 
   componentWillRender() {
-    this.scrollParent = this.getScrollParent(this.host);
-    this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true });
-    window.addEventListener('resize', this.throttledResize, { passive: true });
-    this.handleResize();
-    this.handleScrollEvent();
-    this.getFocusableElements();
+    setTimeout(() => {
+      this.scrollParent = this.getScrollParent(this.host);
+      this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true });
+      window.addEventListener('resize', this.throttledResize, { passive: true });
+      this.handleResize();
+      this.handleScrollEvent();
+      this.getFocusableElements();
+    }, 1000); // 3-second delay before execution
   }
 
   componentDidLoad() {
diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
index af4b4eba6d..604d5c4924 100644
--- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
+++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
@@ -10,6 +10,7 @@
 
 post-mainnavigation {
   flex: 0 0 auto;
+  box-shadow: var(--post-core-elevation-3);
 
   // reset links and buttons
   post-list-item {

From a6840d7e3d09675cf8c64028b1fae9f885fb294d Mon Sep 17 00:00:00 2001
From: Alona Zherdetska <alionazhv@gmail.com>
Date: Mon, 10 Feb 2025 10:15:04 +0100
Subject: [PATCH 2/2] chore:added script for debugging

---
 .../components/post-header/post-header.scss   |  1 +
 .../components/post-header/post-header.tsx    |  2 +-
 .../stories/modules/header/header.stories.ts  | 19 +++++++++++++++++--
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
index efed7dc21e..f664de43c4 100644
--- a/packages/components/src/components/post-header/post-header.scss
+++ b/packages/components/src/components/post-header/post-header.scss
@@ -190,6 +190,7 @@ slot[name='post-logo'] {
   width: 100%;
 
   @include media.min(lg) {
+    height: var(--main-navigation-height);
     inset-block-start: var(--global-header-minimal-height);
 
     &::before {
diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
index 37fa1ef4ff..9aea5d6cc1 100644
--- a/packages/components/src/components/post-header/post-header.tsx
+++ b/packages/components/src/components/post-header/post-header.tsx
@@ -49,7 +49,7 @@ export class PostHeader {
       this.handleResize();
       this.handleScrollEvent();
       this.getFocusableElements();
-    }, 1000); // 3-second delay before execution
+    }, 2000); // delay
   }
 
   componentDidLoad() {
diff --git a/packages/documentation/src/stories/modules/header/header.stories.ts b/packages/documentation/src/stories/modules/header/header.stories.ts
index 63263812f3..de19d01951 100644
--- a/packages/documentation/src/stories/modules/header/header.stories.ts
+++ b/packages/documentation/src/stories/modules/header/header.stories.ts
@@ -53,9 +53,24 @@ const meta: MetaComponent = {
       },
     },
   },
+  
   decorators: [
-    story => html` <div class="header-story-wrapper">${story()} ${fakeContent()}</div> `,
-  ],
+    story => html`
+      <script>
+        document.addEventListener('DOMContentLoaded', () => {
+          const scrollPosition = sessionStorage.getItem('scrollPosition');
+          if (scrollPosition !== null) {
+            window.scrollTo(0, parseInt(scrollPosition, 10));
+          }
+        });
+  
+        window.addEventListener('beforeunload', () => {
+          sessionStorage.setItem('scrollPosition', window.scrollY);
+        });
+      </script>
+      <div class="header-story-wrapper">${story()} ${fakeContent()}</div>
+    `,
+  ],  
 };
 
 export default meta;