Added CSS adjustments for group-heading alignment and implemented tit…

…le attribute for tooltips in program-calendar.js

- Updated .group-header and .left-block CSS classes to prevent text wrapping and ensure proper alignment of group heading and count elements.
- Applied text-overflow: ellipsis to .group-heading to handle long text and prevent it from breaking the layout.
- Added a title attribute to the group-heading div in program-calendar.js to display the full text as a tooltip when truncated.

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

@@ -408,17 +408,19 @@ body {
                 color: white;
                 display: flex;
                 flex-direction: row;
-                flex-wrap: wrap;
+                flex-wrap: nowrap; /* Prevent wrapping */
                 align-content: center;
                 justify-content: space-between;
                 border-radius: 7px 7px 0px 0px;
+                padding-right: 0; /* Adjust padding if needed */
                 &.content-hidden {
                     border-radius: 7px;
                 }
                 & .left-block {
                     display: flex;
                     flex-direction: row;
-                    flex-wrap: wrap;
+                    align-items: center; /* Vertically center the items */
+                    flex-wrap: nowrap; /* Prevent wrapping within left-block */
                     align-content: center;
                     border-radius: 7px 7px 0px 0px;
                 }
@@ -433,17 +435,25 @@ body {
                 line-height: 24px;
                 height: 24px;
                 margin-left: 10px;
+                white-space: nowrap; /* Prevents the text from wrapping to a new line */
+                overflow: hidden; /* Hides the overflow text */
+                text-overflow: ellipsis; /* Adds an ellipsis (...) to indicate truncated text */
+                max-width: calc(100% - 50px); /* Adjusts the width to leave space for the group count */
+                display: inline-block; /* Ensures the element respects the max-width */
+                vertical-align: middle; /* Aligns it properly with other inline elements */
             }
             & .group-count {
+                display: inline-flex; /* Changed from flex to inline-flex */
+                align-items: center; /* Vertically center the content */
+                justify-content: center; /* Center the content horizontally */
+                min-width: 24px; /* Set minimum width instead of fixed width */
                 margin-left: 8px;
+                margin-right: 10px; /* Add margin if necessary to prevent overlapping */
                 height: 24px;
-                width: 32px;
                 border-radius: 10px;
                 line-height: 24px;
                 background-color: black;
                 background: rgba(0,0,0,0.2);
-                display: flex;
-                justify-content: center;
             }
             & .group-controls {
                 margin-left: 15px;

scripts/program-calendar.js

@@ -176,7 +176,7 @@ export async function buildCalendar(dataObj, block, type, mappingArray, period)
                 <div class="left-block">
                     <img src="/icons/chevron-right.svg" class="group-expand group-controls inactive"></img>
                     <img src="/icons/chevron-right.svg" class="group-collapse group-controls"></img>
-                    <div class="group-heading">${lookupType(group)}</div>
+                    <div class="group-heading" title="${lookupType(group)}">${lookupType(group)}</div>
                     <div class="group-count">${matchedItems.length}</div>
                 </div>
                 <div class="right-block">