chore: update markdown styles (#40061)

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  -->
This commit is contained in:
Pawan Kumar 2025-04-03 15:20:17 +05:30 committed by GitHub
parent c17e28ebd8
commit 7792fbf2b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -117,4 +117,25 @@
margin-left: 0; margin-left: 0;
border-left: var(--border-width-2) solid var(--color-bd-neutral); 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;
}
} }