Skip to content

[Markdown] Fix layout issues for markdown embeddables in small panels #240806

Merged
mbondyra merged 2 commits intoelastic:mainfrom
mbondyra:markdown_fix_small_panels
Oct 28, 2025
Merged

[Markdown] Fix layout issues for markdown embeddables in small panels #240806
mbondyra merged 2 commits intoelastic:mainfrom
mbondyra:markdown_fix_small_panels

Conversation

@mbondyra
Copy link
Contributor

@mbondyra mbondyra commented Oct 27, 2025 •
edited by kibanamachine
Loading

Summary

Fixes layout issues for markdown embeddables in small dashboard panels using CSS container queries. When a markdown panel is shorter than 120px, the UI now adapts to a compact layout that maximizes usable space.

Problem

Markdown embeddables are not rendering correctly in small (short) panels. The editor toolbar and footer would take up significant vertical space, leaving little room for content editing in constrained layouts. Turns out that this usecase can be more important to just ignore it, since users might use small panels to only place the title in the dashboard.

Screenshot 2025-10-27 at 14 08 42

Solution

Layout Improvements

Implemented responsive layout using CSS container queries (@container) to detect when panels are too small and automatically switch to a compact layout:

When container height < 120px:

  • Editor toolbar is hidden to maximize editing space - toolbar can be useful but it's not essential for the users to edit their markdown panels.
  • Footer transforms to compact overlay positioned in the top-right corner with transparent background
Screenshot 2025-10-27 at 14 08 17

The new layout

Screenshot 2025-10-27 at 14 13 31

The smallest layout that still follows the 'classic' design
@mbondyra mbondyra added release_note:fix Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// backport:version Backport to applied version labels v9.3.0 v9.2.1 labels Oct 27, 2025
@mbondyra mbondyra marked this pull request as ready for review October 27, 2025 13:11
@mbondyra mbondyra requested a review from a team as a code owner October 27, 2025 13:11
@elasticmachine
Copy link
Contributor

elasticmachine commented Oct 27, 2025

Pinging @elastic/kibana-presentation (Team:Presentation)
@mbondyra mbondyra force-pushed the markdown_fix_small_panels branch from 53c7c39 to 13820d4 Compare October 27, 2025 13:36
ThomThomson
ThomThomson approved these changes Oct 27, 2025
View reviewed changes
Copy link
Contributor

@ThomThomson ThomThomson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix looks good to me!
src/platform/plugins/shared/dashboard_markdown/public/components/markdown_editor.tsx
[SHORT_CONTAINER_QUERY]: {
blockSize: `100%`,
// TODO: Do not use data-test-subj to style - should be fixed in EUI
'[data-test-subj="euiMarkdownEditorToolbar"]': {
Copy link
Contributor

@ThomThomson ThomThomson Oct 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no class for the toolbar? If not, would you mind creating or linking an issue in the EUI repo so we don't lose track of this?
Copy link
Contributor Author

@mbondyra mbondyra Oct 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

elastic/eui#9153
@mbondyra mbondyra mentioned this pull request Oct 27, 2025
Closed
@mbondyra mbondyra force-pushed the markdown_fix_small_panels branch from 679f6f5 to 7e99d48 Compare October 28, 2025 11:58
@elasticmachine
Copy link
Contributor

elasticmachine commented Oct 28, 2025

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] FTR Configs #12 / Detection Engine - Exception workflows APIs @serverless @serverlessQA @ess rule exceptions execution creating rules with exceptions should be able to execute against an exception list that does include valid case sensitive entries and get back 0 alerts

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
dashboardMarkdown 71.2KB 71.5KB +313.0B

History
@mbondyra mbondyra merged commit ec67b3d into elastic:main Oct 28, 2025
13 checks passed
@mbondyra mbondyra deleted the markdown_fix_small_panels branch October 28, 2025 13:46
@kibanamachine
Copy link
Contributor

kibanamachine commented Oct 28, 2025

Starting backport for target branches: 9.2

https://github.com/elastic/kibana/actions/runs/18876920595
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 28, 2025
@mbondyra
[Markdown] Fix layout issues for markdown embeddables in small panels (…
5f2b51f 
…elastic#240806)

## Summary

Fixes layout issues for markdown embeddables in small dashboard panels
using CSS container queries. When a markdown panel is shorter than
120px, the UI now adapts to a compact layout that maximizes usable
space.

## Problem

Markdown embeddables are not rendering correctly in small (short)
panels. The editor toolbar and footer would take up significant vertical
space, leaving little room for content editing in constrained layouts.
Turns out that this usecase can be more important to just ignore it,
since users might use small panels to only place the title in the
dashboard.

<img width="643" height="89" alt="Screenshot 2025-10-27 at 14 08 42"
src="https://github.com/user-attachments/assets/b3478586-13d0-4ef0-b5b5-617089886db3"
/>

## Solution

### Layout Improvements

Implemented responsive layout using CSS container queries (@container)
to detect when panels are too small and automatically switch to a
compact layout:

  When container height < 120px:
- Editor toolbar is hidden to maximize editing space - toolbar can be
useful but it's not essential for the users to edit their markdown
panels.
- Footer transforms to compact overlay positioned in the top-right
corner with transparent background
<img width="640" height="83" alt="Screenshot 2025-10-27 at 14 08 17"
src="https://github.com/user-attachments/assets/14582c1a-1f56-42bf-9f63-4bd1a1add77e"
/>

The new layout

<img width="581" height="186" alt="Screenshot 2025-10-27 at 14 13 31"
src="https://github.com/user-attachments/assets/8982f333-5133-4fbb-b94b-815cb28b61de"
/>

The smallest layout that still follows the 'classic' design

(cherry picked from commit ec67b3d)
@kibanamachine kibanamachine mentioned this pull request Oct 28, 2025
Merged
@kibanamachine
Copy link
Contributor

kibanamachine commented Oct 28, 2025

💚 All backports created successfully

Status Branch Result
✅ 9.2

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation
kibanamachine added a commit that referenced this pull request Oct 28, 2025
@kibanamachine @mbondyra
[9.2] [Markdown] Fix layout issues for markdown embeddables in small …
2937a59 
…panels (#240806) (#240993)

# Backport

This will backport the following commits from `main` to `9.2`:
- [[Markdown] Fix layout issues for markdown embeddables in small panels
(#240806)](#240806)

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

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

<!--BACKPORT [{"author":{"name":"Marta
Bondyra","email":"4283304+mbondyra@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-10-28T13:46:01Z","message":"[Markdown]
Fix layout issues for markdown embeddables in small panels
(#240806)\n\n## Summary\n\nFixes layout issues for markdown embeddables
in small dashboard panels\nusing CSS container queries. When a markdown
panel is shorter than\n120px, the UI now adapts to a compact layout that
maximizes usable\nspace.\n\n## Problem\n\nMarkdown embeddables are not
rendering correctly in small (short)\npanels. The editor toolbar and
footer would take up significant vertical\nspace, leaving little room
for content editing in constrained layouts.\nTurns out that this usecase
can be more important to just ignore it,\nsince users might use small
panels to only place the title in the\ndashboard.\n\n<img width=\"643\"
height=\"89\" alt=\"Screenshot 2025-10-27 at 14 08
42\"\nsrc=\"https://github.com/user-attachments/assets/b3478586-13d0-4ef0-b5b5-617089886db3\"\n/>\n\n##
Solution\n\n### Layout Improvements\n\nImplemented responsive layout
using CSS container queries (@container)\nto detect when panels are too
small and automatically switch to a\ncompact layout:\n\n When container
height < 120px:\n- Editor toolbar is hidden to maximize editing space -
toolbar can be\nuseful but it's not essential for the users to edit
their markdown\npanels.\n- Footer transforms to compact overlay
positioned in the top-right\ncorner with transparent background\n<img
width=\"640\" height=\"83\" alt=\"Screenshot 2025-10-27 at 14 08
17\"\nsrc=\"https://github.com/user-attachments/assets/14582c1a-1f56-42bf-9f63-4bd1a1add77e\"\n/>\n\nThe
new layout\n\n<img width=\"581\" height=\"186\" alt=\"Screenshot
2025-10-27 at 14 13
31\"\nsrc=\"https://github.com/user-attachments/assets/8982f333-5133-4fbb-b94b-815cb28b61de\"\n/>\n\nThe
smallest layout that still follows the 'classic'
design","sha":"ec67b3d637f5f3dec965b0bc29bb673cf999cbfa","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Presentation","backport:version","v9.3.0","v9.2.1"],"title":"[Markdown]
Fix layout issues for markdown embeddables in small panels
","number":240806,"url":"https://github.com/elastic/kibana/pull/240806","mergeCommit":{"message":"[Markdown]
Fix layout issues for markdown embeddables in small panels
(#240806)\n\n## Summary\n\nFixes layout issues for markdown embeddables
in small dashboard panels\nusing CSS container queries. When a markdown
panel is shorter than\n120px, the UI now adapts to a compact layout that
maximizes usable\nspace.\n\n## Problem\n\nMarkdown embeddables are not
rendering correctly in small (short)\npanels. The editor toolbar and
footer would take up significant vertical\nspace, leaving little room
for content editing in constrained layouts.\nTurns out that this usecase
can be more important to just ignore it,\nsince users might use small
panels to only place the title in the\ndashboard.\n\n<img width=\"643\"
height=\"89\" alt=\"Screenshot 2025-10-27 at 14 08
42\"\nsrc=\"https://github.com/user-attachments/assets/b3478586-13d0-4ef0-b5b5-617089886db3\"\n/>\n\n##
Solution\n\n### Layout Improvements\n\nImplemented responsive layout
using CSS container queries (@container)\nto detect when panels are too
small and automatically switch to a\ncompact layout:\n\n When container
height < 120px:\n- Editor toolbar is hidden to maximize editing space -
toolbar can be\nuseful but it's not essential for the users to edit
their markdown\npanels.\n- Footer transforms to compact overlay
positioned in the top-right\ncorner with transparent background\n<img
width=\"640\" height=\"83\" alt=\"Screenshot 2025-10-27 at 14 08
17\"\nsrc=\"https://github.com/user-attachments/assets/14582c1a-1f56-42bf-9f63-4bd1a1add77e\"\n/>\n\nThe
new layout\n\n<img width=\"581\" height=\"186\" alt=\"Screenshot
2025-10-27 at 14 13
31\"\nsrc=\"https://github.com/user-attachments/assets/8982f333-5133-4fbb-b94b-815cb28b61de\"\n/>\n\nThe
smallest layout that still follows the 'classic'
design","sha":"ec67b3d637f5f3dec965b0bc29bb673cf999cbfa"}},"sourceBranch":"main","suggestedTargetBranches":["9.2"],"targetPullRequestStates":[{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/240806","number":240806,"mergeCommit":{"message":"[Markdown]
Fix layout issues for markdown embeddables in small panels
(#240806)\n\n## Summary\n\nFixes layout issues for markdown embeddables
in small dashboard panels\nusing CSS container queries. When a markdown
panel is shorter than\n120px, the UI now adapts to a compact layout that
maximizes usable\nspace.\n\n## Problem\n\nMarkdown embeddables are not
rendering correctly in small (short)\npanels. The editor toolbar and
footer would take up significant vertical\nspace, leaving little room
for content editing in constrained layouts.\nTurns out that this usecase
can be more important to just ignore it,\nsince users might use small
panels to only place the title in the\ndashboard.\n\n<img width=\"643\"
height=\"89\" alt=\"Screenshot 2025-10-27 at 14 08
42\"\nsrc=\"https://github.com/user-attachments/assets/b3478586-13d0-4ef0-b5b5-617089886db3\"\n/>\n\n##
Solution\n\n### Layout Improvements\n\nImplemented responsive layout
using CSS container queries (@container)\nto detect when panels are too
small and automatically switch to a\ncompact layout:\n\n When container
height < 120px:\n- Editor toolbar is hidden to maximize editing space -
toolbar can be\nuseful but it's not essential for the users to edit
their markdown\npanels.\n- Footer transforms to compact overlay
positioned in the top-right\ncorner with transparent background\n<img
width=\"640\" height=\"83\" alt=\"Screenshot 2025-10-27 at 14 08
17\"\nsrc=\"https://github.com/user-attachments/assets/14582c1a-1f56-42bf-9f63-4bd1a1add77e\"\n/>\n\nThe
new layout\n\n<img width=\"581\" height=\"186\" alt=\"Screenshot
2025-10-27 at 14 13
31\"\nsrc=\"https://github.com/user-attachments/assets/8982f333-5133-4fbb-b94b-815cb28b61de\"\n/>\n\nThe
smallest layout that still follows the 'classic'
design","sha":"ec67b3d637f5f3dec965b0bc29bb673cf999cbfa"}},{"branch":"9.2","label":"v9.2.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
@andreadelrio andreadelrio mentioned this pull request Oct 28, 2025
Open
qn895 pushed a commit to qn895/kibana that referenced this pull request Oct 30, 2025
@mbondyra @qn895
[Markdown] Fix layout issues for markdown embeddables in small panels (…
0d61ea9 
…elastic#240806)

## Summary

Fixes layout issues for markdown embeddables in small dashboard panels
using CSS container queries. When a markdown panel is shorter than
120px, the UI now adapts to a compact layout that maximizes usable
space.

## Problem

Markdown embeddables are not rendering correctly in small (short)
panels. The editor toolbar and footer would take up significant vertical
space, leaving little room for content editing in constrained layouts.
Turns out that this usecase can be more important to just ignore it,
since users might use small panels to only place the title in the
dashboard.

<img width="643" height="89" alt="Screenshot 2025-10-27 at 14 08 42"
src="https://github.com/user-attachments/assets/b3478586-13d0-4ef0-b5b5-617089886db3"
/>

## Solution

### Layout Improvements

Implemented responsive layout using CSS container queries (@container)
to detect when panels are too small and automatically switch to a
compact layout:

  When container height < 120px:
- Editor toolbar is hidden to maximize editing space - toolbar can be
useful but it's not essential for the users to edit their markdown
panels.
- Footer transforms to compact overlay positioned in the top-right
corner with transparent background
<img width="640" height="83" alt="Screenshot 2025-10-27 at 14 08 17"
src="https://github.com/user-attachments/assets/14582c1a-1f56-42bf-9f63-4bd1a1add77e"
/>

The new layout

<img width="581" height="186" alt="Screenshot 2025-10-27 at 14 13 31"
src="https://github.com/user-attachments/assets/8982f333-5133-4fbb-b94b-815cb28b61de"
/>

The smallest layout that still follows the 'classic' design
ana-davydova pushed a commit to ana-davydova/kibana that referenced this pull request Nov 3, 2025
@mbondyra @ana-davydova
[Markdown] Fix layout issues for markdown embeddables in small panels (…
96cc907 
…elastic#240806)

## Summary

Fixes layout issues for markdown embeddables in small dashboard panels
using CSS container queries. When a markdown panel is shorter than
120px, the UI now adapts to a compact layout that maximizes usable
space.

## Problem

Markdown embeddables are not rendering correctly in small (short)
panels. The editor toolbar and footer would take up significant vertical
space, leaving little room for content editing in constrained layouts.
Turns out that this usecase can be more important to just ignore it,
since users might use small panels to only place the title in the
dashboard.

<img width="643" height="89" alt="Screenshot 2025-10-27 at 14 08 42"
src="https://github.com/user-attachments/assets/b3478586-13d0-4ef0-b5b5-617089886db3"
/>

## Solution

### Layout Improvements

Implemented responsive layout using CSS container queries (@container)
to detect when panels are too small and automatically switch to a
compact layout:

  When container height < 120px:
- Editor toolbar is hidden to maximize editing space - toolbar can be
useful but it's not essential for the users to edit their markdown
panels.
- Footer transforms to compact overlay positioned in the top-right
corner with transparent background
<img width="640" height="83" alt="Screenshot 2025-10-27 at 14 08 17"
src="https://github.com/user-attachments/assets/14582c1a-1f56-42bf-9f63-4bd1a1add77e"
/>

The new layout

<img width="581" height="186" alt="Screenshot 2025-10-27 at 14 13 31"
src="https://github.com/user-attachments/assets/8982f333-5133-4fbb-b94b-815cb28b61de"
/>

The smallest layout that still follows the 'classic' design
albertoblaz pushed a commit to albertoblaz/kibana that referenced this pull request Nov 4, 2025
@mbondyra @albertoblaz
[Markdown] Fix layout issues for markdown embeddables in small panels (…
bfca388 
…elastic#240806)

## Summary

Fixes layout issues for markdown embeddables in small dashboard panels
using CSS container queries. When a markdown panel is shorter than
120px, the UI now adapts to a compact layout that maximizes usable
space.

## Problem

Markdown embeddables are not rendering correctly in small (short)
panels. The editor toolbar and footer would take up significant vertical
space, leaving little room for content editing in constrained layouts.
Turns out that this usecase can be more important to just ignore it,
since users might use small panels to only place the title in the
dashboard.

<img width="643" height="89" alt="Screenshot 2025-10-27 at 14 08 42"
src="https://github.com/user-attachments/assets/b3478586-13d0-4ef0-b5b5-617089886db3"
/>

## Solution

### Layout Improvements

Implemented responsive layout using CSS container queries (@container)
to detect when panels are too small and automatically switch to a
compact layout:

  When container height < 120px:
- Editor toolbar is hidden to maximize editing space - toolbar can be
useful but it's not essential for the users to edit their markdown
panels.
- Footer transforms to compact overlay positioned in the top-right
corner with transparent background
<img width="640" height="83" alt="Screenshot 2025-10-27 at 14 08 17"
src="https://github.com/user-attachments/assets/14582c1a-1f56-42bf-9f63-4bd1a1add77e"
/>

The new layout

<img width="581" height="186" alt="Screenshot 2025-10-27 at 14 13 31"
src="https://github.com/user-attachments/assets/8982f333-5133-4fbb-b94b-815cb28b61de"
/>

The smallest layout that still follows the 'classic' design
@ragini-pandey ragini-pandey mentioned this pull request Jan 31, 2026
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:version Backport to applied version labels release_note:fix Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// v9.2.1 v9.3.0

4 participants

@mbondyra @elasticmachine @kibanamachine @ThomThomson