Fix dashboard description markdown overflow (#31534)

* Fix dashboard description markdown overflow

* Review fixes, Improved e2e test

e2e/test/scenarios/dashboard/dashboard.cy.spec.js

@@ -683,6 +683,59 @@ describe("scenarios > dashboard", () => {
       cy.findByText("There was a problem displaying this chart.");
     });
   });
+
+  it("should not have markdown content overflow in description (metabase#31326)", () => {
+    cy.intercept("GET", "/api/dashboard/1").as("getDashboard");
+    cy.intercept("PUT", "/api/dashboard/1").as("updateDashboard");
+    visitDashboard(1);
+    cy.wait("@getDashboard");
+
+    cy.get("main header").icon("info").click();
+
+    const testMarkdownContent =
+      "{selectall}# Heading 1{enter}{enter}**bold** https://www.metabase.com/community_posts/how-to-measure-the-success-of-new-product-features-and-why-it-is-important{enter}{enter}![alt](/app/assets/img/welcome-modal-2.png){enter}{enter}This is my description. ";
+
+    rightSidebar().within(() => {
+      cy.findByPlaceholderText("Add description")
+        .click()
+        .type(testMarkdownContent)
+        .blur();
+    });
+
+    cy.wait("@updateDashboard");
+
+    rightSidebar().within(() => {
+      // check that markdown content is not bigger than its container
+      cy.findByTestId("editable-text").then($markdown => {
+        const el = $markdown[0];
+
+        // vertical
+        expect(el.clientHeight).to.be.gte(el.firstElementChild.clientHeight);
+
+        // horizontal
+        $markdown.find("*").each((_index, childEl) => {
+          const parentRect = el.getBoundingClientRect();
+          const childRect = childEl.getBoundingClientRect();
+
+          expect(parentRect.left).to.be.lte(childRect.left);
+          expect(parentRect.right).to.be.gte(childRect.right);
+        });
+      });
+
+      cy.findByTestId("editable-text")
+        .click()
+        .then($el => {
+          const lineHeight = parseFloat(
+            window.getComputedStyle($el[0]).lineHeight,
+          );
+
+          // check that textarea has proper height when we change markdown text
+          expect($el[0].scrollHeight).to.be.gte(
+            testMarkdownContent.split("{enter}").length * lineHeight, // num of lines * lineHeight
+          );
+        });
+    });
+  });
 });
 
 function checkOptionsForFilter(filter) {

frontend/src/metabase/core/components/EditableText/EditableText.styled.tsx

 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { color } from "metabase/lib/colors";
-import MarkdownBase from "../Markdown";
 
 export interface EditableTextRootProps {
   isEditing?: boolean;
   isDisabled: boolean;
+  isEditingMarkdown?: boolean;
 }
 
 export const EditableTextRoot = styled.div<EditableTextRootProps>`
@@ -14,6 +14,7 @@ export const EditableTextRoot = styled.div<EditableTextRootProps>`
   padding: 0.25rem;
   border: 1px solid transparent;
   border-radius: 4px;
+  word-wrap: break-word;
 
   &:hover,
   &:focus-within {
@@ -27,12 +28,16 @@ export const EditableTextRoot = styled.div<EditableTextRootProps>`
       border-color: ${color("border")};
     `}
 
-  &:after {
-    content: attr(data-value);
-    visibility: hidden;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-  }
+  ${({ isEditingMarkdown }) =>
+    isEditingMarkdown &&
+    css`
+      &:after {
+        content: attr(data-value);
+        visibility: hidden;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+      }
+    `}
 `;
 
 export const EditableTextArea = styled.textarea`
@@ -58,7 +63,3 @@ export const EditableTextArea = styled.textarea`
     cursor: text;
   }
 `;
-
-export const Markdown = styled(MarkdownBase)`
-  position: absolute;
-`;

frontend/src/metabase/core/components/EditableText/EditableText.tsx

@@ -13,11 +13,8 @@ import {
 
 import { usePrevious } from "react-use";
 
-import {
-  EditableTextArea,
-  EditableTextRoot,
-  Markdown,
-} from "./EditableText.styled";
+import Markdown from "metabase/core/components/Markdown";
+import { EditableTextArea, EditableTextRoot } from "./EditableText.styled";
 
 export type EditableTextAttributes = Omit<
   HTMLAttributes<HTMLDivElement>,
@@ -133,6 +130,7 @@ const EditableText = forwardRef(function EditableText(
       ref={ref}
       isEditing={isEditing}
       isDisabled={isDisabled}
+      isEditingMarkdown={!shouldShowMarkdown}
       data-value={`${displayValue}\u00A0`}
       data-testid="editable-text"
     >