Docs Site: Misalignment of icon and text in "Rules" component

[anuradha9712]

Description

On the docs site, the icon and text misalign with each other.

Expected result

Icon and Text should align properly

Steps to fix the issue

• Fork and clone this repository
• First checkout to develop branch, and from that create a new branch
• Switch current directory to docs using command cd docs
• Install dependencies using npm install
• Start development server using npm run dev
• Check the issue on your local environment on localhost:8000
• Refer to this

[youngheart12]

@anuradha9712 Should align centre or top

[anuradha9712]

Icons should be aligned at top like this.

[youngheart12]

@anuradha9712 Wanted to bring this to your attention, the current issue is happening because of this

Issue Overview: Unwanted <p>Tag Wrapping
The Problem:
In MDX files, when we place plain text inside components as children, MDX automatically wraps the text in a <p> tag. This happens particularly in this case

<IconWrapper iconType='error'> Create a new account </IconWrapper>

and not in <IconWrapper iconType='error'> Create a new account </IconWrapper> i.e when text get placed inline, (find in screenshot how it get interpreted)

Why It Matters:

Wrapping text in a <p> tag makes it a block element by default, introducing margin which does impact the align top expected behaviour .

Solution 1: Use an Inline <span> Tag
How It Works:
By wrapping the text in a <span>, we explicitly control the output element, ensuring it’s inline and preventing MDX from adding a <p> tag.

Example:
<InlineMessage> <IconWrapper iconType='error'> <span>Update to the better version of InNote.</span> </IconWrapper> </InlineMessage>"
or
<InlineMessage> <IconWrapper iconType='error'> Update to the better version of InNote</IconWrapper> </InlineMessage>
or
Creating a new component
<InlineMessage> <IconWrapper iconType='error'> <MDXText content="Update to the better version of InNote"/> </IconWrapper> </InlineMessage>

const MDXText=({content})=><span>{content}</span>

Before implementation i wanted to discuss which approach we should go forward