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,