From 5f1690a3cd4eef3f65f054e33cf7d431ca86d716 Mon Sep 17 00:00:00 2001
From: devperate <devperate@gmail.com>
Date: Fri, 2 May 2025 01:55:37 +0000
Subject: [PATCH] Resolve "fix(docs): Embedded Sandbox flickers during
 execution"

---
 .../.vitepress/theme/components/CodeSandbox.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/.vitepress/theme/components/CodeSandbox.vue b/packages/docs/src/.vitepress/theme/components/CodeSandbox.vue
index 8c01744..8a94193 100644
--- a/packages/docs/src/.vitepress/theme/components/CodeSandbox.vue
+++ b/packages/docs/src/.vitepress/theme/components/CodeSandbox.vue
@@ -10,7 +10,6 @@
         :options="{
           showGutter: true,
           minLines: 1,
-          maxLines: props.fullHeight ? null : 20,
           showPrintMargin: false
         }"
         @keydown="handleExecuteHotkey"
@@ -135,7 +134,7 @@ const editorContainerStyle = computed(() => ({
 const editorStyle = computed(() => ({
   width: '100%',
   height: '100%', // Fill container height
-  minHeight: props.fullHeight ? '0' : '3em'
+  minHeight: props.fullHeight ? '0' : editorStyleminHeight.value
 }));
 
 const outputContainerStyle = computed(() => ({
@@ -151,6 +150,20 @@ const consoleOutputStyle = computed(() => ({
   maxHeight: props.fullHeight ? 'none' : '250px'
 }));
 
+const codeAmountOfLines = computed(() => {
+  // Calculate the amount of lines by splitting the code string by either \n \r or \r\n
+  const lines = code.value.split(/\r?\n/);
+
+  return lines.length;
+});
+
+const editorStyleminHeight = computed(() => {
+  if (props.fullHeight) return '0';
+
+  // NOTE: We only want to show a max of 20 lines.
+  return codeAmountOfLines.value >= 20 ? `${(20 * 2) -2}em` : `${(codeAmountOfLines.value * 2) -2}em`;
+});
+
 // Methods
 const clearLogs = () => {
   logs.value = [];