[BUG] Product cards layout on mobile, profile header alignment, and scrollbar spacing

[Aryan0699]

Description

Fix visual issues in product cards on mobile size, user profile header layout, and page spacing symmetry.

Current Behavior

• Product avatars are not perfectly circular and cards feel too wide on mobile.
• User profile banner/avatar/upload icon alignment looks off.
• Scrollbar gutter makes layout feel horizontally uneven.

Expected Behavior

• Avatars are circular and product cards are properly constrained/padded on mobile.
• Banner/avatar/upload icon are cleanly aligned across breakpoints.
• Content appears visually centered with stable scrollbar spacing.

Steps to Reproduce

• Open marketplace on mobile width and inspect product cards.
• Open user profile settings and check banner/avatar/icon alignment.
• Visit a long page and observe left-right spacing when scrollbar appears.

Next.js Version

16.1.7

Operating System

Linux (Ubuntu)

Node.js Version

24.14.1

Browser

Chrome

Screenshots

Additional Context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Aryan0699]

Currently working on this

[wolgwang1729]

@Aryan0699, You can create a draft PR if you have done significant work.

[Aryan0699]

@wolgwang1729 already raised a PR for the same #348

[wolgwang1729]

@Aryan0699 Oh! I see. It wasn't linked here, so I missed it.
It is better to write the hashtag without a code block so that it shows in the issue. "Fixes #342" instead of "Fixes #342 " . Can you please edit the PR(s)?

[Aryan0699]

Yes sure

[Aryan0699]

I did the change but its reflected i guess?

[wolgwang1729]

I think maybe it only works when the PR is created.

[Aryan0699]

I will remember that for later thanks 👍