Issue #3211622 by Gauravmahlawat, mherchel, kiran.kadam911, rikki_iki:...

Issue #3211622 by Gauravmahlawat, mherchel, kiran.kadam911, rikki_iki: Olivero: Text can be cut off at mobile if site-branding text goes to two lines

(cherry picked from commit df024ac4)

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

@@ -41,7 +41,7 @@
   flex-shrink: 1;
   align-items: flex-end;
   min-width: calc(33.33333vw + 0.75rem);
-  height: 3.375rem;
+  min-height: 3.375rem;
   padding-top: 0;
   padding-bottom: 0.5625rem;
 
@@ -52,14 +52,14 @@
 @media (min-width: 31.25rem) {
 
 .site-branding {
-    height: 4.5rem
+    min-height: 4.5rem
 }
   }
 
 @media (min-width: 43.75rem) {
 
 .site-branding {
-    height: 6.75rem;
+    min-height: 6.75rem;
     padding-bottom: 1.125rem
 }
   }
@@ -99,7 +99,7 @@
 
 .site-branding {
     min-width: calc(14.28571vw + 0.99107rem);
-    height: 11.25rem;
+    min-height: 11.25rem;
     padding-top: 0;
     padding-bottom: 0
 }

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

@@ -10,7 +10,7 @@
   flex-shrink: 1;
   align-items: flex-end;
   min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding));
-  height: var(--sp3);
+  min-height: var(--sp3);
   margin-inline: calc(-1 * var(--container-padding)) var(--sp);
   padding-block: 0 var(--sp0-5);
   padding-inline-start: var(--container-padding);
@@ -20,11 +20,11 @@
   background-image: linear-gradient(160deg, var(--color--blue-50) 0%, #0d7ab8 78.66%);
 
   @media (--sm) {
-    height: var(--sp4);
+    min-height: var(--sp4);
   }
 
   @media (--md) {
-    height: var(--sp6);
+    min-height: var(--sp6);
     padding-block-end: var(--sp);
   }
 
@@ -34,7 +34,7 @@
 
   @media (--nav) {
     min-width: calc((2 * var(--grid-col-width--nav)) + (2 * var(--grid-gap--nav)) + var(--container-padding-nav));
-    height: var(--site-header-height-wide);
+    min-height: var(--site-header-height-wide);
     margin-inline-start: calc(-1 * var(--container-padding-nav));
     padding-block: 0;
     padding-inline-start: var(--container-padding-nav);