Merge branch '40-fix-docs-embedded-sandbox-flickers-during-execution' into 'development'

Resolve "fix(docs): Embedded Sandbox flickers during execution"

Closes #40

See merge request GeneralProtocols/xo/stack!84

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 = [];