From 7792fbf2b4168b9d610a619472517eda880ab18b Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pawan@appsmith.com>
Date: Thu, 3 Apr 2025 15:20:17 +0530
Subject: [PATCH] chore: update markdown styles (#40061)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CE PR for updating markdown styles needed in AI Chat markdown viewer for
notion

/ok-to-test tags="@tag.AIAgents"

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **Style**
- Enhanced markdown image presentation with improved sizing, rounded
corners, and a cover-fit display.
- Refined spacing for primary headings and paragraph text to boost
readability.
- Streamlined list items containing checkboxes for a cleaner, more
consistent viewing experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/14239259731>
> Commit: d53c0d7ee50fe38589a16c1045dedf09ab2d1485
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14239259731&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.AIAgents`
> Spec:
> <hr>Thu, 03 Apr 2025 09:29:28 UTC
<!-- end of auto-generated comment: Cypress test results  -->
---
 .../components/Markdown/src/styles.module.css | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css
index ec054452d8..2c10c42ebf 100644
--- a/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css
@@ -117,4 +117,25 @@
     margin-left: 0;
     border-left: var(--border-width-2) solid var(--color-bd-neutral);
   }
+
+  /* Images in markdown should be responsive and have a max height of 540px. Border radius is the same as button border radius */
+  img {
+    max-height: 540px;
+    border-radius: var(--border-radius-elevation-3);
+    object-fit: cover;
+    margin-top: var(--inner-spacing-1);
+  }
+
+  [data-component="h1"]:first-child {
+    margin-block: var(--inner-spacing-4);
+  }
+
+  p {
+    margin-block: var(--inner-spacing-1);
+  }
+
+  :is(ul, ol) li:has(input[type="checkbox"]) {
+    list-style-type: none;
+    margin-left: 0;
+  }
 }