[FIX] fixed the Mobile view card of about section misaligned

[Manishhhsys]

Issue Reference

SEE (#75 )
The card in the About section appeared misaligned on mobile view, while it displayed correctly on desktop view.

---

What Was Changed

• Replaced the <p> tag with a <div> tag inside the card component.
• This adjustment ensures consistent alignment and proper layout behavior across all screen sizes.

---

Why Was It Changed

Using a <p> tag for wrapping elements caused default browser margins and spacing issues, resulting in misalignment on mobile devices.
Switching to a <div> eliminates this issue and keeps the layout responsive and visually consistent.

---

Screenshots

Before:

After:

---

Additional Context (Optional)

• This fix ensures consistent behavior across different screen breakpoints.

Summary by CodeRabbit

• Style
  • Updated internal HTML structure for the contributor card component while maintaining visual appearance and functionality.

[vercel]

@Manishhhsys is attempting to deploy a commit to the idan lodzki's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Modified the PersonCard component to render the contributor role using a div element instead of a paragraph element while maintaining identical styling classes. This change updates the semantic HTML structure without affecting the visual layout or component behavior.

Changes

Cohort / File(s)	Summary
Semantic HTML updates components/PersonCard.tsx	Changed contributor role rendered element from <p> to <div> with unchanged styling classes

Suggested labels

hacktoberfest, hacktoberfest-accepted

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2cf3ac5 and 5bf3612.

📒 Files selected for processing (1)

• components/PersonCard.tsx (1 hunks)

🔇 Additional comments (1)

components/PersonCard.tsx (1)

29-29: LGTM! Effective fix for the mobile alignment issue.

Changing from <p> to <div> removes the default paragraph margins that were causing misalignment on mobile. Since c.role is a short label (e.g., "Developer") rather than a true paragraph, using <div> is semantically appropriate and provides consistent spacing across breakpoints.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}