[8.18] Fixing layout of the embeddablePanelHeading containing description an… (#219428) (#220754)

# Backport

This will backport the following commits from `main` to `8.18`:
- [Fixing layout of the embeddablePanelHeading containing description
an… (#219428)](https://github.com/elastic/kibana/pull/219428)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Ola
Pawlus","email":"98127445+olapawlus@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-05-06T08:48:33Z","message":"Fixing
layout of the embeddablePanelHeading containing description an…
(#219428)\n\nIt has been assumed that everything of the embeddable panel
heading will\nstay on one line, and this is a proposal based on that
assumption.\n\nThis video shows how the layout
responds:\n\n\nhttps://github.com/user-attachments/assets/db7f3e38-1fbd-4d21-a0a2-96ed1768b744\n\n\n\nIntroduced
ellipsis for panel titles and custom time range badges when\nthe text
overflows.\n\nFixed the issue with the description icon, which was
wrapping to the\nnext line.\n\nFixed the layout of the embeddable panel
heading containing three\nelements: title, icon, and badge.\n\nCloses:
#211252 and #219868\n\n\nImproved layout of children within the parent
container, as the previous\nstyles didn’t prevent significant
disproportion caused by varying title\nand time-range-badge text lengths
(disproportion is shown in the first\nscreenshot below).\n![Screenshot
2025-05-02 at 19
39\n01](https://github.com/user-attachments/assets/23c4a4ae-2dc0-4c04-9ecf-ed4abfba8c76)\nNow,
each child (which is title and time-range-badge) will
grow/shrink\nproportionally, ensuring consistent layout regardless of
their content\nlength. (as shown in the screenshots below)\n![Screenshot
2025-05-02 at 19
39\n30](https://github.com/user-attachments/assets/a48d1c9e-2bb0-4c55-96be-3b379091e904)\n![Screenshot
2025-05-02 at 19
40\n06](https://github.com/user-attachments/assets/72171174-6565-412a-abb9-1fc53b7b094c)\n\n---------\n\nCo-authored-by:
Hannah Mudge <Heenawter@users.noreply.github.com>\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"ca062472b949de4efb480611c0eebff411f67b00","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","Feature:Dashboard","regression","release_note:fix","Team:Presentation","loe:small","impact:high","backport:version","v9.1.0","v8.19.0","v8.18.1","v9.0.1"],"title":"Fixing
layout of the embeddablePanelHeading containing description
an…","number":219428,"url":"https://github.com/elastic/kibana/pull/219428","mergeCommit":{"message":"Fixing
layout of the embeddablePanelHeading containing description an…
(#219428)\n\nIt has been assumed that everything of the embeddable panel
heading will\nstay on one line, and this is a proposal based on that
assumption.\n\nThis video shows how the layout
responds:\n\n\nhttps://github.com/user-attachments/assets/db7f3e38-1fbd-4d21-a0a2-96ed1768b744\n\n\n\nIntroduced
ellipsis for panel titles and custom time range badges when\nthe text
overflows.\n\nFixed the issue with the description icon, which was
wrapping to the\nnext line.\n\nFixed the layout of the embeddable panel
heading containing three\nelements: title, icon, and badge.\n\nCloses:
#211252 and #219868\n\n\nImproved layout of children within the parent
container, as the previous\nstyles didn’t prevent significant
disproportion caused by varying title\nand time-range-badge text lengths
(disproportion is shown in the first\nscreenshot below).\n![Screenshot
2025-05-02 at 19
39\n01](https://github.com/user-attachments/assets/23c4a4ae-2dc0-4c04-9ecf-ed4abfba8c76)\nNow,
each child (which is title and time-range-badge) will
grow/shrink\nproportionally, ensuring consistent layout regardless of
their content\nlength. (as shown in the screenshots below)\n![Screenshot
2025-05-02 at 19
39\n30](https://github.com/user-attachments/assets/a48d1c9e-2bb0-4c55-96be-3b379091e904)\n![Screenshot
2025-05-02 at 19
40\n06](https://github.com/user-attachments/assets/72171174-6565-412a-abb9-1fc53b7b094c)\n\n---------\n\nCo-authored-by:
Hannah Mudge <Heenawter@users.noreply.github.com>\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"ca062472b949de4efb480611c0eebff411f67b00"}},"sourceBranch":"main","suggestedTargetBranches":["8.18","9.0"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/219428","number":219428,"mergeCommit":{"message":"Fixing
layout of the embeddablePanelHeading containing description an…
(#219428)\n\nIt has been assumed that everything of the embeddable panel
heading will\nstay on one line, and this is a proposal based on that
assumption.\n\nThis video shows how the layout
responds:\n\n\nhttps://github.com/user-attachments/assets/db7f3e38-1fbd-4d21-a0a2-96ed1768b744\n\n\n\nIntroduced
ellipsis for panel titles and custom time range badges when\nthe text
overflows.\n\nFixed the issue with the description icon, which was
wrapping to the\nnext line.\n\nFixed the layout of the embeddable panel
heading containing three\nelements: title, icon, and badge.\n\nCloses:
#211252 and #219868\n\n\nImproved layout of children within the parent
container, as the previous\nstyles didn’t prevent significant
disproportion caused by varying title\nand time-range-badge text lengths
(disproportion is shown in the first\nscreenshot below).\n![Screenshot
2025-05-02 at 19
39\n01](https://github.com/user-attachments/assets/23c4a4ae-2dc0-4c04-9ecf-ed4abfba8c76)\nNow,
each child (which is title and time-range-badge) will
grow/shrink\nproportionally, ensuring consistent layout regardless of
their content\nlength. (as shown in the screenshots below)\n![Screenshot
2025-05-02 at 19
39\n30](https://github.com/user-attachments/assets/a48d1c9e-2bb0-4c55-96be-3b379091e904)\n![Screenshot
2025-05-02 at 19
40\n06](https://github.com/user-attachments/assets/72171174-6565-412a-abb9-1fc53b7b094c)\n\n---------\n\nCo-authored-by:
Hannah Mudge <Heenawter@users.noreply.github.com>\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"ca062472b949de4efb480611c0eebff411f67b00"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/220206","number":220206,"state":"MERGED","mergeCommit":{"sha":"b3450affa4dd7a2c827a29b4769ad79e966686a7","message":"[8.19]
Fixing layout of the embeddablePanelHeading containing description an…
(#219428) (#220206)\n\n# Backport\n\nThis will backport the following
commits from `main` to `8.19`:\n- [Fixing layout of the
embeddablePanelHeading containing description\nan…
(#219428)](https://github.com/elastic/kibana/pull/219428)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by:
Ola Pawlus
<98127445+olapawlus@users.noreply.github.com>\nCo-authored-by: Hannah
Mudge <Heenawter@users.noreply.github.com>\nCo-authored-by: Elastic
Machine
<elasticmachine@users.noreply.github.com>"}},{"branch":"8.18","label":"v8.18.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.0","label":"v9.0.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

src/platform/plugins/private/presentation_panel/public/panel_component/_presentation_panel.scss

@@ -58,9 +58,15 @@
   line-height: 1.5;
   flex-grow: 1;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   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;
+  }
   &:not(:empty) {
     line-height: $euiSizeL;
     padding-left: $euiSizeS;
@@ -71,6 +77,9 @@
     display: flex;
     align-items: center;
     padding-right: $euiSizeS;
+    h2 {
+      overflow: hidden;
+    }
   }
 
   .embPanel__titleTooltipAnchor {

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

@@ -181,7 +181,7 @@ export const PresentationPanelTitle = ({
           {!hideTitle ? (
             <h2>
               {ariaLabelElement}
-              {panelTitleElement}&nbsp;
+              {panelTitleElement}
             </h2>
           ) : null}
           <EuiIcon