From 5f2b51fe02cacf4ae567c69d34621414182a5924 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
Date: Tue, 28 Oct 2025 14:46:01 +0100
Subject: [PATCH] [Markdown] Fix layout issues for markdown embeddables in
 small panels  (#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 ec67b3d637f5f3dec965b0bc29bb673cf999cbfa)
---
 .../public/components/markdown_editor.tsx     | 18 +++++++++++++---
 .../public/components/markdown_footer.tsx     | 21 +++++++++++++++----
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/platform/plugins/shared/dashboard_markdown/public/components/markdown_editor.tsx b/src/platform/plugins/shared/dashboard_markdown/public/components/markdown_editor.tsx
index b4a033d5fef8a..c5465a59dfc04 100644
--- a/src/platform/plugins/shared/dashboard_markdown/public/components/markdown_editor.tsx
+++ b/src/platform/plugins/shared/dashboard_markdown/public/components/markdown_editor.tsx
@@ -15,7 +15,7 @@ import type { PublishingSubject } from '@kbn/presentation-publishing';
 import { useStateFromPublishingSubject } from '@kbn/presentation-publishing';
 import React, { useLayoutEffect, useRef } from 'react';
 import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
-import { FOOTER_HELP_TEXT, MarkdownFooter } from './markdown_footer';
+import { SHORT_CONTAINER_QUERY, FOOTER_HELP_TEXT, MarkdownFooter } from './markdown_footer';
 import { MarkdownRenderer } from './markdown_renderer';
 
 interface EuiMarkdownEditorRef {
@@ -24,6 +24,11 @@ interface EuiMarkdownEditorRef {
 }
 
 const componentStyles = {
+  rootContainer: css({
+    display: 'flex',
+    width: '100%',
+    containerType: 'size',
+  }),
   container: css({
     width: '100%',
   }),
@@ -43,6 +48,13 @@ const componentStyles = {
       textarea: {
         minBlockSize: 'initial',
       },
+      [SHORT_CONTAINER_QUERY]: {
+        blockSize: `100%`,
+        // TODO: Do not use data-test-subj to style - should be fixed in EUI
+        '[data-test-subj="euiMarkdownEditorToolbar"]': {
+          display: 'none',
+        },
+      },
     }),
 };
 
@@ -82,7 +94,7 @@ export const MarkdownEditor = ({
   const isSaveable = Boolean(value === '' || value !== content);
 
   return (
-    <>
+    <div css={styles.rootContainer}>
       <div
         css={[styles.container, isPreview && styles.componentInvisible]}
         onKeyDown={(e) => {
@@ -117,7 +129,7 @@ export const MarkdownEditor = ({
         cancelButtonRef={cancelButtonRef}
         isSaveable={isSaveable}
       />
-    </>
+    </div>
   );
 };
 
diff --git a/src/platform/plugins/shared/dashboard_markdown/public/components/markdown_footer.tsx b/src/platform/plugins/shared/dashboard_markdown/public/components/markdown_footer.tsx
index e2b3fd1d93bac..9c660a4953571 100644
--- a/src/platform/plugins/shared/dashboard_markdown/public/components/markdown_footer.tsx
+++ b/src/platform/plugins/shared/dashboard_markdown/public/components/markdown_footer.tsx
@@ -24,10 +24,12 @@ import { i18n } from '@kbn/i18n';
 
 export const FOOTER_HELP_TEXT = htmlIdGenerator()('markdownEditorFooterHelp');
 
+// Container query for when the height is too short and we need to switch to a more compact layout
+export const SHORT_CONTAINER_QUERY = `@container (max-height: 119px)`;
+
 const footerStyles = {
   footer: ({ euiTheme }: UseEuiTheme) =>
     css({
-      padding: euiTheme.size.s,
       borderRadius: `0 0 ${euiTheme.size.s} ${euiTheme.size.s}`,
       width: '100%',
       borderTop: `1px solid ${euiTheme.colors.borderBasePlain}`,
@@ -40,10 +42,21 @@ const footerStyles = {
         opacity: 0.9,
         inset: 0,
       },
+      [SHORT_CONTAINER_QUERY]: {
+        borderTop: 'none',
+        right: 0,
+        width: 'auto',
+        zIndex: 1,
+        '&::before': {
+          background: 'none',
+        },
+      },
+    }),
+  buttonsContainer: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      margin: euiTheme.size.s,
+      position: 'relative',
     }),
-  buttonsContainer: css({
-    position: 'relative',
-  }),
   previewFooter: ({ euiTheme }: UseEuiTheme) =>
     css({
       opacity: 0,