git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-22 10:51:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: add styling for markdown lists

Browse Source
This commit is contained in:
Sam Chau
2025-01-18 15:27:46 +10:30
parent 545e846006
commit 2621b3eea4
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/profile/ProfileCard.jsx
View File

@@ -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>

8
frontend/src/components/ui/MarkdownEditor.jsx
View File

@@ -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>
) : (