fix: scroll issues

Author: BearToCode

.vscode/settings.json

@@ -22,5 +22,8 @@
 	"[svelte]": {
 		"editor.defaultFormatter": "svelte.svelte-vscode"
 	},
+	"[scss]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
 	"css.customData": [".vscode/tailwind.json"]
 }

docs/src/lib/examples/assets/PlusIcon.svelte

@@ -1,3 +1,3 @@
 <div class="discord-plus-icon">
-	<iconify-icon icon="radix-icons:plus-circled" class="text-2xl"></iconify-icon>
+	<iconify-icon icon="icons8:plus" class="text-2xl"></iconify-icon>
 </div>

docs/src/lib/styles/discord.scss

@@ -14,14 +14,18 @@
 
 		.carta-wrapper {
 			padding: 1rem;
-			padding-left: 56px;
 			flex-grow: 1;
-			overflow-y: auto;
+		}
+
+		.carta-input-wrapper {
+			padding-left: 36px;
+		}
 
-			.carta-container {
-				min-height: 32px;
-				max-height: 400px;
-			}
+		.carta-input,
+		.carta-renderer {
+			min-height: 32px;
+			max-height: 400px;
+			overflow: auto;
 		}
 
 		.carta-font-code {
@@ -37,7 +41,7 @@
 		.discord-plus-icon {
 			position: absolute;
 			top: 15px;
-			left: -24px;
+			left: 15px;
 			width: 1.75rem;
 			height: 1.75rem;
 			transform: translateX(-50%) translateY(-50%);

docs/src/lib/styles/github.scss

@@ -17,12 +17,13 @@
 		.carta-wrapper {
 			padding: 1rem;
 			flex-grow: 1;
-			overflow-y: auto;
+		}
 
-			.carta-container {
-				min-height: 120px;
-				max-height: 160px;
-			}
+		.carta-input,
+		.carta-renderer {
+			min-height: 120px;
+			max-height: 160px;
+			overflow: auto;
 		}
 
 		.carta-font-code {

docs/src/lib/styles/math-stack-exchange.scss

@@ -25,10 +25,12 @@
 			&:focus-within {
 				outline: 3px solid rgba($accent, 0.5);
 			}
+		}
 
-			.carta-container {
-				height: 200px;
-			}
+		.carta-input,
+		.carta-renderer {
+			height: 200px;
+			overflow: auto;
 		}
 
 		.carta-font-code {

packages/carta-md/src/lib/internal/components/Input.svelte

@@ -49,8 +49,13 @@
 		textarea.style.height = textarea.scrollHeight + 'px';
 		textarea.scrollTop = 0;
 
+		const isFocused = document.activeElement === textarea;
+		if (!isFocused) return;
 		const coords = carta.input?.getCursorXY();
-		elem.scrollTo({ top: coords?.top, behavior: 'instant' });
+		if (!coords) return;
+
+		if (coords.top < 0 || coords.top >= elem.scrollTop + elem.clientHeight)
+			elem.scrollTo({ top: coords?.top, behavior: 'instant' });
 	};
 
 	const focus = () => {
@@ -188,7 +193,6 @@
 	}
 
 	.carta-input-wrapper {
-		height: 100%;
 		position: relative;
 		font-family: monospace;
 	}