Fix: Profile upload icon issue and product card layout in mobile layout

[Aryan0699]

Description

• Made small fixes to ui by fixing the banner and avatar layout and also aligning the upload icon the avatar
• Added scrollbar-gutter: stable globally to equalize left and right padding, preventing layout shifts.
• Replaced the grey hover that comes on rpofile icon on navabar with simple opacity change on hover

Files that can be ignored

marketplace.tsx , fetch-service.ts

Resolved or fixed issue

Fixes #342

Screenshots

Before

After

Affirmation

• My code follows the CONTRIBUTING.md guidelines

[vercel]

@Aryan0699 is attempting to deploy a commit to the shopstr-eng Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

UI polish focused on mobile layout: improves user profile banner/avatar positioning, stabilizes layout when scrollbars appear, and adjusts product grid behavior for small screens.

Changes:

• Reworked user profile banner + avatar overlay positioning and upload icon placement.
• Stabilized page width by adding global scrollbar-gutter: stable.
• Tweaked nav profile hover/focus styling and adjusted mobile product grid to single-column with padding.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
utils/nostr/fetch-service.ts	Minor formatting/indentation adjustments in review update logic.
styles/globals.css	Adds stable scrollbar gutter to reduce layout shift.
pages/settings/user-profile.tsx	Updates banner container + avatar overlay layout and upload icon positioning.
components/utility-components/profile/profile-dropdown.tsx	Adjusts avatar sizing/styling in the dropdown trigger.
components/nav-top.tsx	Simplifies profile hover styling to opacity-based behavior.
components/home/marketplace.tsx	Formatting tweaks in JSX and conditional rendering alignment.
components/display-products.tsx	Changes product grid to 1-column on mobile with padding, responsive columns on larger screens.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Aryan0699]

Apologies for the branch drift — I’ll take care of this.

[GautamBytes]

LGTM Now!

[GautamBytes]

Apologies for the branch drift — I’ll take care of this.

no worries

[GautamBytes]

for this also , solve conflict please !

[Aryan0699]

Sure will do that

[Aryan0699]

Done

[Aryan0699]

Just a minute , sorry for that i guess i updated it wrong . Will get back in 5 min

[Aryan0699]

Yes Done now , sorry for that