Fixing layout of the embeddablePanelHeading containing description an…#219428
Merged
olapawlus merged 10 commits intoelastic:mainfrom May 6, 2025
Merged
Fixing layout of the embeddablePanelHeading containing description an…#219428olapawlus merged 10 commits intoelastic:mainfrom
olapawlus merged 10 commits intoelastic:mainfrom
Conversation
…d time range label
olapawlus
added
bug
olapawlus
changed the title
Member
Author
|
Uploading Screen Recording 2025-04-28 at 17.39.15.mov… |
nickpeihl
approved these changes
Apr 28, 2025
Contributor
nickpeihl
left a comment
nickpeihl
left a comment
There was a problem hiding this comment.
lgtm! But let's see what @andreadelrio thinks.
@olapawlus I think you can make this PR "Ready for review". Then we'll need to add the appropriate release-* and backport-version labels to this PR.
Contributor
|
Pinging @elastic/kibana-presentation (Team:Presentation) |
olapawlus
added
release_note:fix
backport:version
Contributor
|
@gvnmagni Would you mind looking at the changes in this PR? Is it okay that we force the time range badge on the panel in the same line as the panel title and truncate with an ellipsis as necessary? I guess the other option would be to wrap the time range badge to the next line if it doesn't fit. |
Member
Author
[Solved] Could you confirm if only the title with description icon, and time range badge are the elements inside the embeddable header container? If so, we can safely assume the header height will not exceed two lines. I'm asking because, to match the layout shown in the screenshot, the parent container should allow its children to wrap to a new line if necessary — but only up to two lines. Each direct child should be styled in a way that prevents its own content from wrapping internally. This ensures that if there are any elements beyond the title with icon, and time range badge, the header container won't push the layout into a third line. Currently, the header's height is hardcoded to 24px, but with change, it should grow dynamically — up to two lines. If we can confirm that only these three elements will be inside the container, we can safely assume the header height will not exceed two lines. The attached video demonstrates the expected behavior: Screen.Recording.2025-05-02.at.20.36.09.mov |
andreadelrio
approved these changes
May 5, 2025
Contributor
andreadelrio
left a comment
andreadelrio
left a comment
There was a problem hiding this comment.
Design changes LGTM. Nice job!
Member
Author
|
@elasticmachine merge upstream |
Contributor
💚 Build Succeeded
Metrics [docs]Async chunks
History
cc @olapawlus |
Contributor
|
Starting backport for target branches: 8.18, 8.19, 9.0 https://github.com/elastic/kibana/actions/runs/14855472821 |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
May 6, 2025
elastic#219428) It has been assumed that everything of the embeddable panel heading will stay on one line, and this is a proposal based on that assumption. This video shows how the layout responds: https://github.com/user-attachments/assets/db7f3e38-1fbd-4d21-a0a2-96ed1768b744 Introduced ellipsis for panel titles and custom time range badges when the text overflows. Fixed the issue with the description icon, which was wrapping to the next line. Fixed the layout of the embeddable panel heading containing three elements: title, icon, and badge. Closes: elastic#211252 and elastic#219868 Improved layout of children within the parent container, as the previous styles didn’t prevent significant disproportion caused by varying title and time-range-badge text lengths (disproportion is shown in the first screenshot below).  Now, each child (which is title and time-range-badge) will grow/shrink proportionally, ensuring consistent layout regardless of their content length. (as shown in the screenshots below)   --------- Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit ca06247)
Contributor
💔 Some backports could not be created
Note: Successful backport PRs will be merged automatically after passing CI. Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
kibanamachine
added
the
backport missing
Contributor
|
Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync. |
2 similar comments
Contributor
|
Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync. |
Contributor
|
Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync. |
kibanamachine
added a commit
that referenced
this pull request
May 12, 2025
…tion an… (#219428) (#220206) # Backport This will backport the following commits from `main` to `8.19`: - [Fixing layout of the embeddablePanelHeading containing description an… (#219428)](#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\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\n\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\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\n\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.19","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\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\n\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,"state":"NOT_CREATED"},{"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--> Co-authored-by: Ola Pawlus <98127445+olapawlus@users.noreply.github.com> Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
kibanamachine
removed
the
backport missing
This was referenced May 12, 2025
Merged
Member
Author
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
olapawlus
added a commit
that referenced
this pull request
May 12, 2025
…ion an… (#219428) (#220752) # Backport This will backport the following commits from `main` to `9.0`: - [Fixing layout of the embeddablePanelHeading containing description an… (#219428)](#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\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\n\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\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\n\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\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\n\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-->
olapawlus
added a commit
that referenced
this pull request
May 12, 2025
…tion an… (#219428) (#220754) # Backport This will backport the following commits from `main` to `8.18`: - [Fixing layout of the embeddablePanelHeading containing description an… (#219428)](#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\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\n\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\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\n\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\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\n\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-->
akowalska622
pushed a commit
to akowalska622/kibana
that referenced
this pull request
May 29, 2025
elastic#219428) It has been assumed that everything of the embeddable panel heading will stay on one line, and this is a proposal based on that assumption. This video shows how the layout responds: https://github.com/user-attachments/assets/db7f3e38-1fbd-4d21-a0a2-96ed1768b744 Introduced ellipsis for panel titles and custom time range badges when the text overflows. Fixed the issue with the description icon, which was wrapping to the next line. Fixed the layout of the embeddable panel heading containing three elements: title, icon, and badge. Closes: elastic#211252 and elastic#219868 Improved layout of children within the parent container, as the previous styles didn’t prevent significant disproportion caused by varying title and time-range-badge text lengths (disproportion is shown in the first screenshot below).  Now, each child (which is title and time-range-badge) will grow/shrink proportionally, ensuring consistent layout regardless of their content length. (as shown in the screenshots below)   --------- Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
qn895
pushed a commit
to qn895/kibana
that referenced
this pull request
Jun 3, 2025
elastic#219428) It has been assumed that everything of the embeddable panel heading will stay on one line, and this is a proposal based on that assumption. This video shows how the layout responds: https://github.com/user-attachments/assets/db7f3e38-1fbd-4d21-a0a2-96ed1768b744 Introduced ellipsis for panel titles and custom time range badges when the text overflows. Fixed the issue with the description icon, which was wrapping to the next line. Fixed the layout of the embeddable panel heading containing three elements: title, icon, and badge. Closes: elastic#211252 and elastic#219868 Improved layout of children within the parent container, as the previous styles didn’t prevent significant disproportion caused by varying title and time-range-badge text lengths (disproportion is shown in the first screenshot below).  Now, each child (which is title and time-range-badge) will grow/shrink proportionally, ensuring consistent layout regardless of their content length. (as shown in the screenshots below)   --------- Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
8 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
It has been assumed that everything of the embeddable panel heading will stay on one line, and this is a proposal based on that assumption.
This video shows how the layout responds:
Screen.Recording.2025-05-02.at.20.37.57.mov
Introduced ellipsis for panel titles and custom time range badges when the text overflows.
Fixed the issue with the description icon, which was wrapping to the next line.
Fixed the layout of the embeddable panel heading containing three elements: title, icon, and badge.
Closes: #211252 and #219868
Improved layout of children within the parent container, as the previous styles didn’t prevent significant disproportion caused by varying title and time-range-badge text lengths (disproportion is shown in the first screenshot below).
Now, each child (which is title and time-range-badge) will grow/shrink proportionally, ensuring consistent layout regardless of their content length. (as shown in the screenshots below)