fix markdown styles

src/views/Settings/dialogs/ChangelogDialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <Dialog v-model:open="changeLogDialog.visible">
+    <Dialog v-model:open="changeLogDialog.visible" class="p-4!">
         <DialogContent class="sm:max-w-4xl">
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.change_log.header') }}</DialogTitle>
@@ -13,6 +13,7 @@
                     >, <a class="cursor-pointer" @click="openExternalLink('https://ko-fi.com/natsumi_sama')">Ko-fi</a>.
                 </span>
                 <VueShowdown
+                    class="changelog-markdown"
                     :markdown="changeLogDialog.changeLog"
                     flavor="github"
                     :options="showdownOptions"
@@ -87,4 +88,58 @@
     .changelog-dialog img {
         width: 100%;
     }
+
+    .changelog-markdown ul,
+    .changelog-markdown ol {
+        padding-left: 1.5rem;
+        margin: 0.5rem 0 1rem;
+        list-style-position: outside;
+    }
+
+    .changelog-markdown ul {
+        list-style-type: disc;
+    }
+
+    .changelog-markdown ol {
+        list-style-type: decimal;
+    }
+
+    .changelog-markdown li {
+        margin: 0.25rem 0;
+    }
+
+    .changelog-markdown h1,
+    .changelog-markdown h2,
+    .changelog-markdown h3,
+    .changelog-markdown h4,
+    .changelog-markdown h5,
+    .changelog-markdown h6 {
+        font-weight: 600;
+        line-height: 1.25;
+        margin: 1.25rem 0 0.5rem;
+    }
+
+    .changelog-markdown h1 {
+        font-size: 1.5rem;
+    }
+
+    .changelog-markdown h2 {
+        font-size: 1.25rem;
+    }
+
+    .changelog-markdown h3 {
+        font-size: 1.125rem;
+    }
+
+    .changelog-markdown h4 {
+        font-size: 1rem;
+    }
+
+    .changelog-markdown h5 {
+        font-size: 0.95rem;
+    }
+
+    .changelog-markdown h6 {
+        font-size: 0.9rem;
+    }
 </style>