fix: heights

Kong · Dec 15, 2023 · 6c8f66b · 6c8f66b
1 parent 3e469c2
commit 6c8f66b
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 22 deletions.
diff --git 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
@@ -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,26 +373,30 @@ onMounted(async () => {
 
   .markdown-editor,
   .markdown-preview {
+    display: flex;
     flex: 1;
+    flex-direction: column;
     width: 100%;
 
     @media (min-width: $kui-breakpoint-phablet) {
       width: 50%;
     }
   }
 
-  .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,22 +424,24 @@ 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;
     text-wrap: wrap;
     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 {