detach preview styling from markdown-body style

modrinth · Oct 30, 2023 · 346c0a2 · 346c0a2
1 parent d2d9f49
commit 346c0a2
Showing 1 changed file with 34 additions and 23 deletions.
diff --git a/lib/components/base/MarkdownEditor.vue b/lib/components/base/MarkdownEditor.vue
@@ -37,11 +37,13 @@
         <span class="label__title">Preview</span>
         <span class="label__description"></span>
       </span>
-      <div
-        style="width: 100%"
-        class="markdown-body"
-        v-html="renderHighlightedString(linkMarkdown)"
-      />
+      <div class="markdown-body-wrapper">
+        <div
+          style="width: 100%"
+          class="markdown-body"
+          v-html="renderHighlightedString(linkMarkdown)"
+        />
+      </div>
       <div class="input-group push-right">
         <Button :action="() => linkModal?.hide()"><XIcon /> Cancel</Button>
         <Button
@@ -122,11 +124,13 @@
         <span class="label__title">Preview</span>
         <span class="label__description"></span>
       </span>
-      <div
-        style="width: 100%"
-        class="markdown-body"
-        v-html="renderHighlightedString(imageMarkdown)"
-      />
+      <div class="markdown-body-wrapper">
+        <div
+          style="width: 100%"
+          class="markdown-body"
+          v-html="renderHighlightedString(imageMarkdown)"
+        />
+      </div>
       <div class="input-group push-right">
         <Button :action="() => imageModal?.hide()"><XIcon /> Cancel</Button>
         <Button
@@ -173,11 +177,14 @@
         <span class="label__title">Preview</span>
         <span class="label__description"></span>
       </span>
-      <div
-        style="width: 100%"
-        class="markdown-body"
-        v-html="renderHighlightedString(videoMarkdown)"
-      />
+
+      <div class="markdown-body-wrapper">
+        <div
+          style="width: 100%"
+          class="markdown-body"
+          v-html="renderHighlightedString(videoMarkdown)"
+        />
+      </div>
       <div class="input-group push-right">
         <Button :action="() => videoModal?.hide()"><XIcon /> Cancel</Button>
         <Button
@@ -243,12 +250,15 @@
         </span>
       </div>
     </div>
-    <div
-      v-if="previewMode"
-      style="width: 100%"
-      class="markdown-body"
-      v-html="renderHighlightedString(currentValue ?? '')"
-    />
+    <div v-if="previewMode">
+      <div class="markdown-body-wrapper">
+        <div
+          style="width: 100%"
+          class="markdown-body"
+          v-html="renderHighlightedString(currentValue ?? '')"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -633,7 +643,7 @@ function openVideoModal() {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .file-input {
   width: 100%;
   padding: 1.5rem;
@@ -737,9 +747,10 @@ function openVideoModal() {
   gap: var(--gap-xs);
 }
 
-.markdown-body {
+.markdown-body-wrapper {
   border: 1px solid var(--color-button-bg);
   border-radius: var(--radius-md);
+  width: 100%;
   padding: var(--radius-md);
   min-height: 6rem;
 }