🐛 Modify markdown page rendering

Author: Phinease

frontend/components/ui/markdownRenderer.tsx

@@ -564,6 +564,18 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
               hr: () => (
                 <hr className="markdown-hr" />
               ),
+              // Ordered list
+              ol: ({ children }: any) => (
+                <ol className="markdown-ol">
+                  {children}
+                </ol>
+              ),
+              // Unordered list
+              ul: ({ children }: any) => (
+                <ul className="markdown-ul">
+                  {children}
+                </ul>
+              ),
               // List item
               li: ({ children }: any) => (
                 <li className="markdown-li">

frontend/styles/react-markdown.css

@@ -110,12 +110,42 @@
   border-radius: 1px;
 }
 
+/* List Styles */
+.markdown-ol {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+  list-style-type: decimal;
+  list-style-position: outside;
+}
+
+.markdown-ul {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+  list-style-type: disc;
+  list-style-position: outside;
+}
+
 /* List Item Styles */
 .markdown-li {
   margin-bottom: 0.25rem;
   color: var(--color-nord0);
 }
 
+/* Remove extra spacing from paragraphs inside list items */
+.markdown-ol li > p,
+.markdown-ul li > p,
+.markdown-li > p {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+/* Preserve spacing only between multiple paragraphs within same list item */
+.markdown-ol li > p + p,
+.markdown-ul li > p + p,
+.markdown-li > p + p {
+  margin-top: 0.5rem !important;
+}
+
 /* Blockquote Styles */
 .markdown-blockquote {
   border-left: 4px solid #d1d5db;