Skip to content

fixed the profile upload icon issue and product card layout in mobille layout#348

Open
Aryan0699 wants to merge 4 commits intoshopstr-eng:mainfrom
Aryan0699:fix/ui_1
Open

fixed the profile upload icon issue and product card layout in mobille layout#348
Aryan0699 wants to merge 4 commits intoshopstr-eng:mainfrom
Aryan0699:fix/ui_1

Conversation

@Aryan0699
Copy link
Copy Markdown
Contributor

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

image image

After

Screenshot from 2026-04-06 00-43-29 Screenshot from 2026-04-06 00-43-50

Affirmation

Copilot AI review requested due to automatic review settings April 5, 2026 19:21
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 5, 2026

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

A member of the Team first needs to authorize it.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Copy Markdown
Contributor Author

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

@GautamBytes
Copy link
Copy Markdown
Contributor

LGTM Now!

@GautamBytes
Copy link
Copy Markdown
Contributor

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

no worries

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants