chore(components): update overflow layout header in tablet and mobile (…

…#4364)
swisspost · Jan 7, 2025 · 5a8b256 · 5a8b256
1 parent 5e1c404
commit 5a8b256
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git a/.changeset/silent-vans-care.md b/.changeset/silent-vans-care.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Updated header overflow in tablet and mobile for long application titles.
diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
@@ -11,6 +11,7 @@
   --global-header-height: 72px;
   --global-header-minimal-height: 24px;
   --main-header-height: 56px;
+  --main-header-min-height: 56px;
   --header-height: calc(var(--global-header-height) + var(--main-header-height));
 
   @include media.min(lg) {
@@ -27,6 +28,7 @@
   @include media.max(lg) {
     --global-header-height: 64px;
     --main-header-height: 48px;
+    --main-header-min-height: 48px;
   }
 }
 
@@ -66,7 +68,6 @@ slot[name='post-logo'] {
   display: flex;
   align-items: center;
   gap: var(--post-core-dimension-24);
-  height: var(--global-header-height);
 }
 
 .align-end {
@@ -91,14 +92,15 @@ slot[name='post-logo'] {
   display: flex;
   padding-left: 0;
   gap: 1rem;
+  flex-shrink: 0 !important;
 }
 
 .title-header {
   display: flex;
   align-items: center;
+  gap: var(--post-core-dimension-8);
+  min-height: var(--main-header-min-height);
   justify-content: space-between;
-  gap: var(--post-core-dimension-4);
-  height: var(--main-header-height);
   background: var(--post-core-color-brand-white);
 
   @include media.min(lg) {
@@ -111,6 +113,8 @@ slot[name='post-logo'] {
     z-index: 1;
     inset-block-start: var(--global-header-height);
     padding-inline: var(--post-core-dimension-8) var(--post-core-dimension-16);
+    padding-block: var(--post-core-dimension-9);
+    flex-wrap: wrap;
 
     &.title-header-mobile-extended {
       border-bottom: 1px solid var(--post-core-color-sandgrey-012);
@@ -124,13 +128,15 @@ slot[name='post-logo'] {
 
 ::slotted(h1) {
   margin: 0 !important;
+  flex-shrink: 10;
 
   @include media.min(lg) {
     font-size: var(--post-core-font-size-28) !important;
   }
 
   @include media.max(lg) {
     font-size: var(--post-core-font-size-20) !important;
+    max-width: calc(100vw - var(--post-core-dimension-8) - var(--post-core-dimension-16));
   }
 }
 

diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
@@ -113,6 +113,9 @@ export class PostHeader {
       this.mobileMenuAnimation.finish(); // no animation
     }
 
+    const mhh = this.host.shadowRoot.querySelector('.title-header').clientHeight;
+    this.host.style.setProperty('--main-header-height', `${mhh}px`);
+
     // Apply only on change for doing work only when necessary
     if (newDevice !== previousDevice) {
       this.device = newDevice;

diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -26,10 +26,6 @@
 }
 
 post-popovercontainer {
-  --post-global-header-height: 72px;
-  --post-main-header-height: 56px;
-  --post-header-height: calc(var(--post-global-header-height) + var(--post-main-header-height));
-
   background-color: #fafafa;
   border: none;
   border-top: 1px solid #e1e0dc;
@@ -38,9 +34,8 @@ post-popovercontainer {
   box-shadow: 0 8px 6px rgba(0, 0, 0, 16%);
 
   @include media.max(lg) {
-    --post-global-header-height: 64px;
     position: absolute;
-    top: var(--post-header-height) !important;
+    top: var(--header-height) !important;
     bottom: 0;
     left: 0;
     width: 100%;