fix: markdown editor scroll issues with max-height (#5031)

* add markdown editor stories to show scrolling bug

* add story

* update story content

* fix markdown editor scroll

* fix space

* lint

packages/ui/src/stories/base/MarkdownEditor.stories.ts

@@ -10,6 +10,48 @@ const meta = {
 
 export default meta
 
+const CONTENT = `# Sample Markdown Document
+
+This is a demonstration of the markdown editor component.
+
+## Features
+
+The editor supports various markdown formatting options:
+
+- **Bold text** for emphasis
+- *Italic text* for subtle emphasis
+- \`Inline code\` for technical terms
+- [Links](https://example.com) for references
+
+## Code Blocks
+
+\`\`\`javascript
+function greet(name) {
+	return \`Hello, \${name}!\`;
+}
+\`\`\`
+
+## Lists
+
+1. First item
+2. Second item
+3. Third item
+
+### Nested Lists
+
+- Parent item
+	- Child item
+	- Another child
+- Another parent
+
+## Blockquotes
+
+> This is a blockquote that can be used for callouts or citations.
+
+## Conclusion
+
+This content demonstrates the editor's capabilities.`
+
 export const Default: StoryObj = {
 	render: () => ({
 		components: { MarkdownEditor },
@@ -17,7 +59,7 @@ export const Default: StoryObj = {
 			const content = ref('# Hello World\n\nThis is some **markdown** content.')
 			return { content }
 		},
-		template: `
+		template: /*html*/ `
 			<div class="h-96">
 				<MarkdownEditor v-model="content" />
 			</div>
@@ -32,10 +74,40 @@ export const WithPlaceholder: StoryObj = {
 			const content = ref('')
 			return { content }
 		},
-		template: `
+		template: /*html*/ `
 			<div class="h-96">
 				<MarkdownEditor v-model="content" placeholder="Write your description here..." />
 			</div>
 		`,
 	}),
 }
+
+export const WithContent: StoryObj = {
+	render: () => ({
+		components: { MarkdownEditor },
+		setup() {
+			const content = ref(CONTENT)
+			return { content }
+		},
+		template: /*html*/ `
+			<div>
+				<MarkdownEditor v-model="content" />
+			</div>
+		`,
+	}),
+}
+
+export const MaxHeightWithScroll: StoryObj = {
+	render: () => ({
+		components: { MarkdownEditor },
+		setup() {
+			const content = ref(CONTENT)
+			return { content }
+		},
+		template: /*html*/ `
+			<div>
+				<MarkdownEditor v-model="content" :max-height="300" />
+			</div>
+		`,
+	}),
+}