From 2621b3eea447961616bed2aaab9a6ad07f62b1ae Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Sat, 18 Jan 2025 15:27:46 +1030
Subject: [PATCH] style: add styling for markdown lists

---
 frontend/src/components/profile/ProfileCard.jsx | 12 ++++++++----
 frontend/src/components/ui/MarkdownEditor.jsx   |  8 +++++++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/profile/ProfileCard.jsx b/frontend/src/components/profile/ProfileCard.jsx
index 333bb85..34edf9e 100644
--- a/frontend/src/components/profile/ProfileCard.jsx
+++ b/frontend/src/components/profile/ProfileCard.jsx
@@ -105,7 +105,7 @@ const ProfileCard = ({
                                     {content.tags.map(tag => (
                                         <span
                                             key={`${profile.file_name}-${tag}`}
-                                            className='bg-blue-600/20 text-blue-400 px-2 py-1 rounded-full text-xs font-semibold shadow-sm'>
+                                            className='bg-blue-600/20 text-blue-400 px-2 py-1 rounded-md text-xs font-semibold shadow-sm'>
                                             {unsanitize(tag)}
                                         </span>
                                     ))}
@@ -171,12 +171,16 @@ const ProfileCard = ({
                     )}
                 </div>
 
-                <hr className='border-gray-700 my-6' />
+                <hr className='border-gray-700 my-3' />
 
                 {/* Description - Fixed Height with Scroll */}
-                <div className='flex-1 overflow-hidden'>
+                <div className='flex-1 overflow-hidden text-sm'>
                     {content.description && (
-                        <div className='h-full overflow-y-auto prose prose-invert prose-pre:bg-gray-800 prose-pre:border prose-pre:border-gray-700 max-w-none'>
+                        <div
+                            className='h-full overflow-y-auto prose prose-invert prose-gray max-w-none
+    [&>ul]:list-disc [&>ul]:ml-4 [&>ul]:mt-2 [&>ul]:mb-4
+    [&>ol]:list-decimal [&>ol]:ml-4 [&>ol]:mt-2 [&>ol]:mb-4
+    [&>ul>li]:mt-0.5 [&>ol>li]:mt-0.5'>
                             <ReactMarkdown>
                                 {unsanitize(content.description)}
                             </ReactMarkdown>
diff --git a/frontend/src/components/ui/MarkdownEditor.jsx b/frontend/src/components/ui/MarkdownEditor.jsx
index 3dc9f80..b7900c5 100644
--- a/frontend/src/components/ui/MarkdownEditor.jsx
+++ b/frontend/src/components/ui/MarkdownEditor.jsx
@@ -139,7 +139,13 @@ const MarkdownEditor = ({value, onChange, placeholder}) => {
             {/* Editor/Preview Area */}
             <div>
                 {isPreview ? (
-                    <div className='px-4 py-3 min-h-[300px] h-full prose prose-sm dark:prose-invert max-w-none bg-white dark:bg-gray-700'>
+                    <div
+                        className='text-sm px-4 py-3 min-h-[300px] h-full prose prose-sm max-w-none bg-white dark:bg-gray-800 dark:prose-invert
+    [&>ul]:list-disc [&>ul]:ml-4 [&>ul]:mt-2 [&>ul]:mb-4
+    [&>ol]:list-decimal [&>ol]:ml-4 [&>ol]:mt-2 [&>ol]:mb-4
+    [&>ul>li]:mt-0.5 [&>ol>li]:mt-0.5
+    [&>ul>li]:text-gray-700 [&>ol>li]:text-gray-700
+    dark:[&>ul>li]:text-gray-300 dark:[&>ol>li]:text-gray-300'>
                         {value ? (
                             <ReactMarkdown>{value}</ReactMarkdown>
                         ) : (