Fixing layout of the embeddablePanelHeading containing description an…

src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_header.tsx

@@ -71,10 +71,15 @@ export const PresentationPanelHeader = <
         padding: 0px ${euiTheme.size.s};
 
         display: flex;
-        flex-grow: 1;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         column-gap: ${euiTheme.size.s};
         align-items: center;
+        // all direct children now share the available parent width equally, ensuring consistent layout regardless of their content length
+        > * {
+          min-width: 0;
+          flex: 1 !important;
+          max-width: fit-content !important;
+        }
       `,
     };
   }, [euiTheme.colors.warning, euiTheme.size]);

src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_title.tsx

@@ -92,7 +92,6 @@ export const PresentationPanelTitle = ({
     if (!panelDescription) {
       return panelTitleElement;
     }
-
     return (
       <EuiToolTip
         title={panelTitle}
@@ -101,18 +100,25 @@ export const PresentationPanelTitle = ({
         position="top"
         anchorProps={{
           'data-test-subj': 'embeddablePanelTooltipAnchor',
-          css: css`
-            max-width: 100%;
+        }}
+      >
+        <div
+          data-test-subj="embeddablePanelTitleInner"
+          className="embPanel__titleInner"
+          css={css`
             display: flex;
             flex-wrap: nowrap;
             column-gap: ${euiTheme.size.xs};
             align-items: center;
-          `,
-        }}
-      >
-        <div data-test-subj="embeddablePanelTitleInner" className="embPanel__titleInner">
+          `}
+        >
           {!hideTitle ? (
-            <h2>
+            <h2
+              // styles necessary for applying ellipsis and showing the info icon if description is present
+              css={css`
+                overflow: hidden;
+              `}
+            >
               <EuiScreenReaderOnly>
                 <span id={headerId}>
                   {panelTitle
@@ -127,7 +133,7 @@ export const PresentationPanelTitle = ({
                       })}
                 </span>
               </EuiScreenReaderOnly>
-              {panelTitleElement}&nbsp;
+              {panelTitleElement}
             </h2>
           ) : null}
           <EuiIcon