Issue #3229094 by mherchel, rikki_iki, Gauravmahlawat: Olivero: Titles should...

Issue #3229094 by mherchel, rikki_iki, Gauravmahlawat: Olivero: Titles should wrap around images in teaser when necessary

core/themes/olivero/css/components/node-teaser.css

@@ -36,16 +36,15 @@
 
 .node--view-mode-teaser .node__top-wrapper {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    margin: 0;
-    margin-bottom: 1.125rem
+    margin: 0
   }
 
 @media (min-width: 62.5rem) {
 
 .node--view-mode-teaser .node__top-wrapper {
-      position: relative; /* Anchor the image */
-      margin: 0
+      position: relative /* Anchor the image */
   }
     }
 
@@ -59,9 +58,23 @@
 
 .node--view-mode-teaser .primary-image {
     flex-shrink: 0;
-    margin: 0
+    margin: 0;
+    margin-bottom: 1.125rem
+
+    /* Ensure title does not wrap under image until necessary. */
   }
 
+.node--view-mode-teaser .primary-image + .node__title {
+      flex-basis: calc(100% - 5.0625rem)
+    }
+
+@media (min-width: 62.5rem) {
+
+.node--view-mode-teaser .primary-image + .node__title {
+        flex-basis: auto
+    }
+      }
+
 .node--view-mode-teaser .primary-image a {
       display: block;
     }
@@ -138,6 +151,7 @@
 
 .node--view-mode-teaser .node__title {
     margin: 0;
+    margin-bottom: 1.125rem;
     color: #0d1214;
     font-size: 1.5rem;
     line-height: 1.6875rem
@@ -146,7 +160,6 @@
 @media (min-width: 62.5rem) {
 
 .node--view-mode-teaser .node__title {
-      margin-bottom: 1.125rem;
       font-size: 2.25rem;
       line-height: 3.375rem
   }

core/themes/olivero/css/components/node-teaser.pcss.css

@@ -30,21 +30,30 @@
 
   & .node__top-wrapper {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     margin: 0;
-    margin-block-end: var(--sp1);
 
     @media (--lg) {
       position: relative; /* Anchor the image */
-      margin: 0;
     }
   }
 
   & .primary-image {
     flex-shrink: 0;
     margin: 0;
+    margin-block-end: var(--sp1);
     margin-inline-end: var(--sp1);
 
+    /* Ensure title does not wrap under image until necessary. */
+    & + .node__title {
+      flex-basis: calc(100% - calc(4.5 * var(--sp)));
+
+      @media (--lg) {
+        flex-basis: auto;
+      }
+    }
+
     & a {
       display: block;
     }
@@ -89,12 +98,12 @@
 
   & .node__title {
     margin: 0;
+    margin-block-end: var(--sp1);
     color: var(--color--gray-0);
     font-size: 24px;
     line-height: var(--line-height-base);
 
     @media (--lg) {
-      margin-block-end: var(--sp1);
       font-size: var(--sp2);
       line-height: var(--sp3);
     }