From e43e6fbe1ec15417a10024f07d7f7bff22dd9f1b Mon Sep 17 00:00:00 2001
From: Isaiah <isaiahjfowler@protonmail.com>
Date: Sat, 2 Dec 2023 21:27:47 -0500
Subject: [PATCH] Keeping the markdown editor and viewer the same height

---
 src/tools/markdown-viewer/markdown-viewer.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/tools/markdown-viewer/markdown-viewer.vue b/src/tools/markdown-viewer/markdown-viewer.vue
index b4e2b32b..6df7dadc 100644
--- a/src/tools/markdown-viewer/markdown-viewer.vue
+++ b/src/tools/markdown-viewer/markdown-viewer.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { useStorage } from '@vueuse/core';
+import { useElementSize, useStorage } from '@vueuse/core';
+
 import { renderMarkdown } from './markdown-viewer.service';
 
 const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
 const inputElement = ref<HTMLElement>();
+const { height } = useElementSize(inputElement);
+
 </script>
 
 <template>
@@ -24,6 +27,6 @@ const inputElement = ref<HTMLElement>();
     />
   </n-form-item>
   <n-form-item label="Prettified version of your markdown">
-    <c-card style="width: 100%; overflow: scroll" v-html="renderMarkdown(rawMd)" />
+    <c-card :style="`width: 100%; overflow: scroll; max-height: ${`${height.valueOf()}px`}`" v-html="renderMarkdown(rawMd)" />
   </n-form-item>
 </template>