Improve Markdown List Alignment

[Nadai2010]

Issue Overview

The page.tsx component currently displays Markdown lists (ul and ol) with improper alignment compared to other Markdown elements, such as headers and paragraphs. This misalignment causes visual inconsistency and affects the readability of the content. The issue is particularly noticeable on smaller screens or devices where the extra indentation stands out more prominently.

• Lists (ul, ol, li) appear overly indented compared to headers and paragraphs.
• Visual inconsistency detracts from the overall readability and presentation of Markdown content.

Features Required:

• Update styling for Markdown list elements to ensure consistent alignment with other Markdown elements.
• Test changes across different devices and screen sizes to maintain responsiveness and readability.

Proposed Solutions or Ideas

Solution:

1. Update the getMarkdownComponents Function:

   • Modify the getMarkdownComponents function to apply custom CSS styles to the ul, ol, and li elements.
   • Set consistent padding and margin values to align lists properly with headers and paragraphs.

2. CSS Adjustments:

   • Add specific classes to handle the alignment of lists and list items, such as pl-5 for padding on the left and ml-0 to remove unnecessary margins.
   • Ensure that list items (li) have minimal left margin (ml-2) to balance the spacing.

[Mystic-Nayy]

@Nadai2010 can I work on this?

[onlydustapp[bot]]

Hey @Gift-Naomi! Thanks for showing interest. We've created an application for you to contribute to Speedrun & Scaffold Stark. Go check it out on OnlyDust!

[Nadai2010]

Hi @Gift-Naomi this issue was an internal to be located, the solution has already been uploaded.

Thanks for wanting to contribute.

[Mystic-Nayy]

Hi @Gift-Naomi this issue was an internal to be located, the solution has already been uploaded.

Thanks for wanting to contribute.

Okay sir I’ll like to contribute if there are any more of issues.