From 6c8f66bc076633ca74aa782a03d9da24baafff57 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Fri, 15 Dec 2023 16:48:27 -0500
Subject: [PATCH] fix: heights

---
 src/components/MarkdownToolbar.vue |  1 +
 src/components/MarkdownUi.vue      | 56 ++++++++++++++++++------------
 2 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/src/components/MarkdownToolbar.vue b/src/components/MarkdownToolbar.vue
index b6ab8430..d42c8de5 100644
--- a/src/components/MarkdownToolbar.vue
+++ b/src/components/MarkdownToolbar.vue
@@ -113,6 +113,7 @@ const templateOptions: TemplateOption[] = [
   display: flex;
   gap: $kui-space-70;
   justify-content: space-between;
+  overflow-x: auto;
 
   .toolbar-left,
   .toolbar-right {
diff --git a/src/components/MarkdownUi.vue b/src/components/MarkdownUi.vue
index a18fe953..d2759137 100644
--- a/src/components/MarkdownUi.vue
+++ b/src/components/MarkdownUi.vue
@@ -38,22 +38,20 @@
         class="markdown-preview"
         data-testid="markdown-preview"
       >
-        <div class="preview-card">
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            v-if="!htmlPreview"
-            class="markdown-rendered-content"
-            data-testid="markdown-rendered-content"
-            v-html="markdownHtml"
-          />
-          <div
-            v-else
-            class="markdown-html-preview"
-            data-testid="markdown-html-preview"
-            v-html="markdownPreviewHtml"
-          />
-          <!-- eslint-enable vue/no-v-html -->
-        </div>
+        <!-- eslint-disable vue/no-v-html -->
+        <div
+          v-if="!htmlPreview"
+          class="markdown-rendered-content preview-output"
+          data-testid="markdown-rendered-content"
+          v-html="markdownHtml"
+        />
+        <div
+          v-else
+          class="markdown-html-preview preview-output"
+          data-testid="markdown-html-preview"
+          v-html="markdownPreviewHtml"
+        />
+        <!-- eslint-enable vue/no-v-html -->
       </div>
     </div>
   </div>
@@ -336,6 +334,9 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
+$minHeightMobile: 300px;
+$minHeightDesktop: 120px;
+
 .kong-ui-public-markdown-ui {
   box-sizing: border-box;
   display: flex;
@@ -351,6 +352,7 @@ onMounted(async () => {
     display: flex;
     flex-direction: column;
     gap: $kui-space-70;
+    padding: $kui-space-30;
     width: 100%;
 
     @media (min-width: $kui-breakpoint-phablet) {
@@ -371,7 +373,9 @@ onMounted(async () => {
 
   .markdown-editor,
   .markdown-preview {
+    display: flex;
     flex: 1;
+    flex-direction: column;
     width: 100%;
 
     @media (min-width: $kui-breakpoint-phablet) {
@@ -379,18 +383,20 @@ onMounted(async () => {
     }
   }
 
-  .preview-card {
+  .preview-output {
     background-color: var(--kui-color-background, $kui-color-background);
-    border: 0;
+    border: $kui-border-width-10 solid $kui-color-border;
     border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
-    box-shadow: var(--kui-shadow-border, $kui-shadow-border); // Ensure the padding is calculated in the element's width
     box-sizing: border-box; // Ensure the padding is calculated in the element's width
     color: var(--kui-color-text, $kui-color-text);
+    flex: 1;
     font-family: var(--kui-font-family-text, $kui-font-family-text);
     font-size: var(--kui-font-size-30, $kui-font-size-30);
     font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
-    height: 100%;
     line-height: var(--kui-line-height-40, $kui-line-height-40);
+    max-height: calc(100vh - 50px);
+    min-height: $minHeightDesktop;
+    overflow: auto;
     padding: var(--kui-space-40, $kui-space-40) var(--kui-space-50, $kui-space-50);
     width: 100%;
   }
@@ -403,6 +409,10 @@ onMounted(async () => {
     }
   }
 
+  .markdown-editor {
+    flex-direction: column;
+  }
+
   textarea.markdown-editor-textarea {
     -webkit-appearance: none; // need this to allow box-shadow to apply on mobile
     appearance: none;
@@ -414,13 +424,14 @@ onMounted(async () => {
     color: var(--kui-color-text, $kui-color-text);
     cursor: text;
     display: block;
+    flex: 1;
     font-family: var(--kui-font-family-code, $kui-font-family-code);
     font-size: var(--kui-font-size-40, $kui-font-size-40); // needs to be at least 16px to prevent automatic zoom in on focus on mobile
     font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
-    height: 100%;
     line-height: var(--kui-line-height-40, $kui-line-height-40);
     max-height: calc(100vh - (#{$kui-space-70} * 2));
     max-width: 100%;
+    min-height: $minHeightMobile;
     outline: none;
     padding: var(--kui-space-40, $kui-space-40) var(--kui-space-50, $kui-space-50);
     resize: vertical;
@@ -428,8 +439,9 @@ onMounted(async () => {
     transition: box-shadow 0.2s ease-in-out;
     width: 100%;
 
-    @media (min-width: $kui-breakpoint-mobile) {
+    @media (min-width: $kui-breakpoint-phablet) {
       font-size: var(--kui-font-size-30, $kui-font-size-30);
+      min-height: $minHeightDesktop;
     }
 
     &::placeholder {