From 4b98958561d35f01cb5a9b87961393baf538aa5c Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 2 Jan 2026 15:44:28 -0700
Subject: [PATCH 1/6] add markdown editor stories to show scrolling bug

---
 .../stories/base/MarkdownEditor.stories.ts    | 67 ++++++++++++++++++-
 1 file changed, 65 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/stories/base/MarkdownEditor.stories.ts b/packages/ui/src/stories/base/MarkdownEditor.stories.ts
index 0f8f07ebf4..919e28aedd 100644
--- a/packages/ui/src/stories/base/MarkdownEditor.stories.ts
+++ b/packages/ui/src/stories/base/MarkdownEditor.stories.ts
@@ -10,6 +10,37 @@ const meta = {
 
 export default meta
 
+
+const CONTENT = `# Scrolling in Small Container
+
+This story shows the markdown editor with a smaller fixed height to demonstrate scrolling.
+
+## Multiple Paragraphs
+
+Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Paragraph 2: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+Paragraph 3: Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+
+Paragraph 4: Duis aute irure dolor in reprehenderit in voluptate velit.
+
+Paragraph 5: Excepteur sint occaecat cupidatat non proident.
+
+## Lists
+
+- Item A
+- Item B
+- Item C
+- Item D
+- Item E
+- Item F
+- Item G
+
+## Conclusion
+
+More content to ensure scrolling is triggered.`
+
 export const Default: StoryObj = {
 	render: () => ({
 		components: { MarkdownEditor },
@@ -17,7 +48,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 +63,42 @@ 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 MaxHeight: StoryObj = {
+	render: () => ({
+		components: { MarkdownEditor },
+		setup() {
+			const content = ref(CONTENT)
+			return { content }
+		},
+		template: /*html*/ `
+			<div>
+				<MarkdownEditor v-model="content" :max-height="300" />
+			</div>
+		`,
+	}),
+}

From 77d49baca3d274df8372f61914bad8c5bd590492 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 2 Jan 2026 17:07:41 -0700
Subject: [PATCH 2/6] add story

---
 packages/ui/src/stories/base/MarkdownEditor.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/stories/base/MarkdownEditor.stories.ts b/packages/ui/src/stories/base/MarkdownEditor.stories.ts
index 919e28aedd..927fa34fe8 100644
--- a/packages/ui/src/stories/base/MarkdownEditor.stories.ts
+++ b/packages/ui/src/stories/base/MarkdownEditor.stories.ts
@@ -88,7 +88,7 @@ export const WithContent: StoryObj = {
 }
 
 
-export const MaxHeight: StoryObj = {
+export const MaxHeightWithScroll: StoryObj = {
 	render: () => ({
 		components: { MarkdownEditor },
 		setup() {

From 6e9aabc71044bf39f8d4a7eac92b3b26a84ab471 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 2 Jan 2026 17:13:41 -0700
Subject: [PATCH 3/6] update story content

---
 .../stories/base/MarkdownEditor.stories.ts    | 46 ++++++++++++-------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/stories/base/MarkdownEditor.stories.ts b/packages/ui/src/stories/base/MarkdownEditor.stories.ts
index 927fa34fe8..9dacc76355 100644
--- a/packages/ui/src/stories/base/MarkdownEditor.stories.ts
+++ b/packages/ui/src/stories/base/MarkdownEditor.stories.ts
@@ -11,35 +11,47 @@ const meta = {
 export default meta
 
 
-const CONTENT = `# Scrolling in Small Container
+const CONTENT = `# Sample Markdown Document
 
-This story shows the markdown editor with a smaller fixed height to demonstrate scrolling.
+This is a demonstration of the markdown editor component.
 
-## Multiple Paragraphs
+## Features
 
-Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+The editor supports various markdown formatting options:
 
-Paragraph 2: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+- **Bold text** for emphasis
+- *Italic text* for subtle emphasis
+- \`Inline code\` for technical terms
+- [Links](https://example.com) for references
 
-Paragraph 3: Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+## Code Blocks
 
-Paragraph 4: Duis aute irure dolor in reprehenderit in voluptate velit.
-
-Paragraph 5: Excepteur sint occaecat cupidatat non proident.
+\`\`\`javascript
+function greet(name) {
+	return \`Hello, \${name}!\`;
+}
+\`\`\`
 
 ## Lists
 
-- Item A
-- Item B
-- Item C
-- Item D
-- Item E
-- Item F
-- Item G
+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
 
-More content to ensure scrolling is triggered.`
+This content demonstrates the editor's capabilities.`
 
 export const Default: StoryObj = {
 	render: () => ({

From bc615150bc57805767a8f52c50fdff8050890131 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 2 Jan 2026 17:14:05 -0700
Subject: [PATCH 4/6] fix markdown editor scroll

---
 packages/assets/styles/defaults.scss          | 11 +---
 .../ui/src/components/base/MarkdownEditor.vue | 55 +++++++++++++------
 2 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/packages/assets/styles/defaults.scss b/packages/assets/styles/defaults.scss
index e0490a1d61..35708ce49a 100644
--- a/packages/assets/styles/defaults.scss
+++ b/packages/assets/styles/defaults.scss
@@ -61,21 +61,12 @@ textarea,
 	font-weight: var(--font-weight-medium);
 	transition: box-shadow 0.1s ease-in-out;
 	min-height: 36px;
-	box-shadow:
+		box-shadow:
 		var(--shadow-inset-sm),
 		0 0 0 0 transparent;
 	border: none;
 	outline: none;
 
-	&:focus,
-	&:focus-visible {
-		box-shadow:
-			inset 0 0 0 transparent,
-			0 0 0 0.25rem var(--color-brand-shadow);
-		color: var(--color-contrast);
-		outline: none;
-	}
-
 	&:disabled,
 	&[disabled] {
 		opacity: 0.6;
diff --git a/packages/ui/src/components/base/MarkdownEditor.vue b/packages/ui/src/components/base/MarkdownEditor.vue
index 90217e25c5..5bf1f00f4c 100644
--- a/packages/ui/src/components/base/MarkdownEditor.vue
+++ b/packages/ui/src/components/base/MarkdownEditor.vue
@@ -48,7 +48,7 @@
 				<Button :action="() => linkModal?.hide()"><XIcon /> Cancel</Button>
 				<Button
 					color="primary"
-					:disabled="linkValidationErrorMessage || !linkUrl"
+					:disabled="!!linkValidationErrorMessage || !linkUrl"
 					:action="
 						() => {
 							if (editor) markdownCommands.replaceSelection(editor, linkMarkdown)
@@ -189,7 +189,7 @@
 				<Button :action="() => videoModal?.hide()"><XIcon /> Cancel</Button>
 				<Button
 					color="primary"
-					:disabled="linkValidationErrorMessage || !linkUrl"
+					:disabled="!!linkValidationErrorMessage || !linkUrl"
 					:action="
 						() => {
 							if (editor) markdownCommands.replaceSelection(editor, videoMarkdown)
@@ -230,7 +230,7 @@
 			</div>
 		</div>
 		<div ref="editorRef" :class="{ hide: previewMode }" />
-		<div v-if="!previewMode" class="info-blurb">
+		<div v-if="!previewMode" class="info-blurb mt-2">
 			<div class="info-blurb">
 				<InfoIcon />
 				<span
@@ -270,7 +270,7 @@
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import { markdown } from '@codemirror/lang-markdown'
 import { Compartment, EditorState } from '@codemirror/state'
-import { EditorView, keymap, placeholder as cm_placeholder } from '@codemirror/view'
+import { placeholder as cm_placeholder, EditorView, keymap } from '@codemirror/view'
 import {
 	AlignLeftIcon,
 	BoldIcon,
@@ -345,19 +345,32 @@ onMounted(() => {
 
 	const theme = EditorView.theme({
 		// in defaults.scss there's references to .cm-content and such to inherit global styles
+		'&': {
+			borderRadius: 'var(--radius-md)',
+			background: 'var(--color-button-bg)',
+			border: '0.25rem solid transparent',
+			transition: 'border-color 0.1s ease-in-out',
+		},
+		'&.cm-focused': {
+			'box-shadow': 'inset 0 0 0 transparent, 0 0 0 0.25rem var(--color-brand-shadow)',
+			color: 'var(--color-contrast)',
+			outline: 'none',
+		},
+		'.cm-focused': {
+			border: 'none',
+		},
 		'.cm-content': {
 			marginBlockEnd: '0.5rem',
 			padding: '0.5rem',
 			minHeight: '200px',
 			caretColor: 'var(--color-contrast)',
 			width: '100%',
-			overflowX: 'scroll',
-			maxHeight: props.maxHeight ? `${props.maxHeight}px` : 'unset',
-			overflowY: 'scroll',
 		},
 		'.cm-scroller': {
+			borderRadius: 'var(--radius-md)',
 			height: '100%',
-			overflow: 'visible',
+			maxHeight: props.maxHeight ? `${props.maxHeight}px` : 'unset',
+			overflow: 'auto',
 		},
 	})
 
@@ -581,23 +594,35 @@ watch(
 						editorThemeCompartment.reconfigure(
 							EditorView.theme({
 								// in defaults.scss there's references to .cm-content and such to inherit global styles
+								'&': {
+									borderRadius: 'var(--radius-md)',
+									background: 'var(--color-button-bg)',
+									border: '0.25rem solid transparent',
+									transition: 'border-color 0.1s ease-in-out',
+								},
+								'&.cm-focused': {
+									'box-shadow': 'inset 0 0 0 transparent, 0 0 0 0.25rem var(--color-brand-shadow)',
+									color: 'var(--color-contrast)',
+									outline: 'none',
+								},
+								'.cm-focused': {
+									border: 'none',
+								},
 								'.cm-content': {
 									marginBlockEnd: '0.5rem',
 									padding: '0.5rem',
 									minHeight: '200px',
 									caretColor: 'var(--color-contrast)',
 									width: '100%',
-									overflowX: 'scroll',
-									maxHeight: props.maxHeight ? `${props.maxHeight}px` : 'unset',
-									overflowY: 'scroll',
-
 									opacity: newValue ? 0.6 : 1,
 									pointerEvents: newValue ? 'none' : 'all',
 									cursor: newValue ? 'not-allowed' : 'auto',
 								},
 								'.cm-scroller': {
+									borderRadius: 'var(--radius-md)',
 									height: '100%',
-									overflow: 'visible',
+									maxHeight: props.maxHeight ? `${props.maxHeight}px` : 'unset',
+									overflow: 'auto',
 								},
 							}),
 						),
@@ -957,8 +982,4 @@ function openVideoModal() {
 	pointer-events: none;
 	cursor: not-allowed;
 }
-
-:deep(.cm-content) {
-	overflow: auto;
-}
 </style>

From 5ed76a141663c89bfe1e8ea0c9805ad22a4bf924 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 2 Jan 2026 19:10:21 -0700
Subject: [PATCH 5/6] fix space

---
 packages/assets/styles/defaults.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/assets/styles/defaults.scss b/packages/assets/styles/defaults.scss
index 35708ce49a..8c3c5a5381 100644
--- a/packages/assets/styles/defaults.scss
+++ b/packages/assets/styles/defaults.scss
@@ -61,7 +61,7 @@ textarea,
 	font-weight: var(--font-weight-medium);
 	transition: box-shadow 0.1s ease-in-out;
 	min-height: 36px;
-		box-shadow:
+	box-shadow:
 		var(--shadow-inset-sm),
 		0 0 0 0 transparent;
 	border: none;

From d6199935bf9068aca35f876c4d572d585a0082c1 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 2 Jan 2026 20:24:47 -0700
Subject: [PATCH 6/6] lint

---
 packages/ui/src/components/base/MarkdownEditor.vue     | 2 +-
 packages/ui/src/stories/base/MarkdownEditor.stories.ts | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/ui/src/components/base/MarkdownEditor.vue b/packages/ui/src/components/base/MarkdownEditor.vue
index 5bf1f00f4c..e8b6bc09ee 100644
--- a/packages/ui/src/components/base/MarkdownEditor.vue
+++ b/packages/ui/src/components/base/MarkdownEditor.vue
@@ -270,7 +270,7 @@
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import { markdown } from '@codemirror/lang-markdown'
 import { Compartment, EditorState } from '@codemirror/state'
-import { placeholder as cm_placeholder, EditorView, keymap } from '@codemirror/view'
+import { EditorView, keymap, placeholder as cm_placeholder } from '@codemirror/view'
 import {
 	AlignLeftIcon,
 	BoldIcon,
diff --git a/packages/ui/src/stories/base/MarkdownEditor.stories.ts b/packages/ui/src/stories/base/MarkdownEditor.stories.ts
index 9dacc76355..3f3a8d74ef 100644
--- a/packages/ui/src/stories/base/MarkdownEditor.stories.ts
+++ b/packages/ui/src/stories/base/MarkdownEditor.stories.ts
@@ -10,7 +10,6 @@ const meta = {
 
 export default meta
 
-
 const CONTENT = `# Sample Markdown Document
 
 This is a demonstration of the markdown editor component.
@@ -83,7 +82,6 @@ export const WithPlaceholder: StoryObj = {
 	}),
 }
 
-
 export const WithContent: StoryObj = {
 	render: () => ({
 		components: { MarkdownEditor },
@@ -99,7 +97,6 @@ export const WithContent: StoryObj = {
 	}),
 }
 
-
 export const MaxHeightWithScroll: StoryObj = {
 	render: () => ({
 		components: { MarkdownEditor },