ASSETS-88919 : [Issue] Deliverables Page UI Breaking for Small Viewport

blocks/gmo-program-details/gmo-program-details.css

@@ -1,9 +1,11 @@
 :root {
     border-bottom: none;
 }
+
 body {
     background-color: rgb(247, 246, 246);
 }
+
 .back-button {
     margin-top: 20px;
     background-color: #FFFFFF;
@@ -26,6 +28,7 @@ body {
         font-weight: bold;
     }
 }
+
 .gmo-program-details.block {
     & .h1 {
         font: normal normal bold 18px/27px Adobe Clean;
@@ -133,11 +136,13 @@ body {
         }
     }
 }
+
 .tab.two-column {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }
+
 .overview-wrapper {
     display: flex;
     flex-direction: column;
@@ -168,6 +173,7 @@ body {
         cursor: pointer;
     }
 }
+
 .kpis-wrapper {
     margin-top: 30px;
     & ul {
@@ -181,6 +187,7 @@ body {
         margin-top: 15px;
     }
 }
+
 .use-cases-wrapper {
     margin-bottom: 30px;
 }
@@ -218,6 +225,7 @@ body {
     flex-direction: column;
     margin-top: 20px;
 }
+
 .links-wrapper {
     margin-top: 30px;
     & .links {
@@ -231,6 +239,7 @@ body {
         color: #0D66D0;
     }
 }
+
 .infocards-wrapper {
     margin-right: 40px;
     & .card {
@@ -244,6 +253,7 @@ body {
         }
     }
 }
+
 .card {
     & .card-heading {
         margin-top: 10px;
@@ -259,6 +269,7 @@ body {
         font-size: 14px;
     }
 }
+
 .milestone, .card-content {
     font: normal normal normal 14px/21px Adobe Clean;
     & .icon {
@@ -271,6 +282,7 @@ body {
         margin-bottom: 5px;
     }
 }
+
 .deliverables {
     & > .page-heading {
         display: flex;
@@ -306,6 +318,7 @@ body {
         }
     }
 }
+
 .table-wrapper {
     font: normal normal bold 14px/21px Adobe Clean;
     & > .table-header {
@@ -323,6 +336,7 @@ body {
         top: 0;
     }
 }
+
 .table-content {
     max-height: 45vh;
     min-height: 7vh;
@@ -331,10 +345,12 @@ body {
         display: none;
     }
 }
+
 .inactive {
     display: none !important;
     visibility: hidden;
 }
+
 .row {
     height: 56px;
     &:not(:last-child) {
@@ -343,10 +359,11 @@ body {
     &.datarow {
         display: flex;
         align-items: center;
-        height: 88px;
+        height: auto; /* Set to auto to accommodate varying heights */
         font-weight: 200;
         & .property {
-            line-height: 88px;
+            line-height: normal; /* Adjust line-height to normal */
+            padding: 10px 0; /* Add padding for better spacing */
         }
         &:first-child, &:nth-child(2) {
             border-top: 2px solid #F4F4F4;
@@ -359,7 +376,7 @@ body {
         & .date-wrapper {
             display: flex;
             flex-direction: column;
-            justify-content:center;
+            justify-content: center;
             & > .completion-date, .revised-date {
                 line-height: 21px;
             }
@@ -400,6 +417,7 @@ body {
         justify-content: center;
     }
 }
+
 .subheader {
     &:nth-child(2) {
         border-top: 2px solid #F4F4F4;
@@ -444,12 +462,13 @@ body {
             border-radius: 3px;
         }
     }
-
 }
+
 .header-row3:hover .date-tooltip {
     visibility: visible;
     opacity: 1;
 }
+
 .date-tooltip {
     background-color: #D3D3D3;
     border-radius: 2px;
@@ -462,32 +481,50 @@ body {
     font: normal normal normal 12px/17px Adobe Clean;
     margin-left: 100px;
 }
+
 .column1 {
     margin-left: 45px;
 }
+
 .column1 {
     width: 200px;
 }
+
 .column3 {
     width: 140px;
 }
-.column4, & .column5, & .column6 {
+
+.column4, .column5, .column6 {
     width: 110px;
 }
+
 .column2 {
     width: 130px;
 }
+
 .column7 {
     width: 170px;
 }
+
 .column8 {
     width: 120px;
 }
+
 .column9 {
     width: 150px;
+    word-wrap: break-word;
+    white-space: normal;
+    line-height: 1.2;
 }
+
 .table-column {
     &:not(:last-child) {
         margin-right: 85px;
     }
 }
+
+@media (max-width: 1255px) {
+    .column9 {
+        width: 100px;
+    }
+}