[Markdown] Fix layout issues for markdown embeddables in small panels (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

Author: mbondyra

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>
   );
 };
 

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,