fix list style view

Author: suvanbanerjee

src/app/_components/markdown-styles.module.css

@@ -29,6 +29,21 @@
     margin-top: 1rem;
     margin-bottom: 1rem;
   }
+
+  .markdown ul {
+    list-style-type: disc;
+    padding-left: 1.25rem;
+  }
+
+  .markdown ol {
+    list-style-type: decimal;
+    padding-left: 1.25rem;
+  }
+
+  .markdown li {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
 }
 
 /* Desktop styles */
@@ -47,6 +62,31 @@
   margin-bottom: 1.5rem;
 }
 
+/* List styles */
+.markdown ul {
+  list-style-type: disc;
+  padding-left: 1.5rem;
+}
+
+.markdown ol {
+  list-style-type: decimal;
+  padding-left: 1.5rem;
+}
+
+.markdown li {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.markdown ul ul,
+.markdown ol ol,
+.markdown ul ol,
+.markdown ol ul {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 1.5rem;
+}
+
 .markdown h2 {
   font-size: 1.875rem;
   margin-top: 3rem;

src/app/_components/post-body.tsx

@@ -8,7 +8,7 @@ export function PostBody({ content }: Props) {
   return (
     <div className="max-w-3xl mx-auto mt-6 sm:mt-10 px-2 sm:px-4 md:px-0">
       <div
-        className={`${markdownStyles["markdown"]} prose prose-sm sm:prose-base lg:prose-lg dark:prose-invert prose-headings:font-display prose-headings:font-bold prose-a:text-accent hover:prose-a:text-accent-light dark:prose-a:text-accent dark:hover:prose-a:text-accent-light prose-img:rounded-lg prose-img:shadow-md mx-auto prose-pre:bg-mono-100 dark:prose-pre:bg-mono-800 prose-code:text-accent-dark dark:prose-code:text-accent-light prose-table:table-auto prose-table:w-full prose-thead:bg-mono-100 dark:prose-thead:bg-mono-800 prose-th:p-2 prose-td:p-2 prose-tr:border-b prose-tr:border-mono-200 dark:prose-tr:border-mono-700`}
+        className={`${markdownStyles["markdown"]} prose prose-sm sm:prose-base lg:prose-lg dark:prose-invert prose-headings:font-display prose-headings:font-bold prose-a:text-accent hover:prose-a:text-accent-light dark:prose-a:text-accent dark:hover:prose-a:text-accent-light prose-img:rounded-lg prose-img:shadow-md mx-auto prose-pre:bg-mono-100 dark:prose-pre:bg-mono-800 prose-code:text-accent-dark dark:prose-code:text-accent-light prose-table:table-auto prose-table:w-full prose-thead:bg-mono-100 dark:prose-thead:bg-mono-800 prose-th:p-2 prose-td:p-2 prose-tr:border-b prose-tr:border-mono-200 dark:prose-tr:border-mono-700 prose-ul:list-disc prose-ol:list-decimal prose-li:marker:text-slate-400`}
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </div>