From d2c97347a74b3f818dc76d76aeaf38e421e1ccd2 Mon Sep 17 00:00:00 2001
From: Aryan0699 <aryanjain26006@gmail.com>
Date: Fri, 10 Apr 2026 14:57:56 +0530
Subject: [PATCH] fixed the profile upload icon issue and product card layout
 in mobile view and stable scrollbar spacing

---
 components/display-products.tsx               |  2 +-
 components/home/marketplace.tsx               | 27 +++++++----------
 components/nav-top.tsx                        |  4 +--
 .../profile/profile-dropdown.tsx              |  2 ++
 pages/settings/user-profile.tsx               | 30 +++++++++----------
 styles/globals.css                            |  2 ++
 utils/nostr/fetch-service.ts                  | 12 ++++----
 7 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/components/display-products.tsx b/components/display-products.tsx
index 255504bb..f98bf36a 100644
--- a/components/display-products.tsx
+++ b/components/display-products.tsx
@@ -292,7 +292,7 @@ const DisplayProducts = ({
         ) : null}
         {filteredProducts.length > 0 && (
           <>
-            <div className="grid max-w-full grid-cols-[repeat(auto-fill,minmax(280px,1fr))] justify-items-stretch gap-4 overflow-x-hidden">
+            <div className="grid max-w-full grid-cols-1 justify-items-stretch gap-4 overflow-x-hidden px-2 sm:grid-cols-[repeat(auto-fill,minmax(280px,1fr))] sm:px-0">
               {getCurrentPageProducts().map(
                 (productData: ProductData, index) => (
                   <ProductCard
diff --git a/components/home/marketplace.tsx b/components/home/marketplace.tsx
index 9985ead0..5da9dfa0 100644
--- a/components/home/marketplace.tsx
+++ b/components/home/marketplace.tsx
@@ -181,7 +181,7 @@ function MarketplacePage({
       focusedPubkey &&
       reviewsContext.merchantReviewsData.has(focusedPubkey) &&
       typeof reviewsContext.merchantReviewsData.get(focusedPubkey) !=
-        "undefined" &&
+      "undefined" &&
       reviewsContext.productReviewsData.has(focusedPubkey) &&
       typeof reviewsContext.productReviewsData.get(focusedPubkey) != "undefined"
     ) {
@@ -345,11 +345,10 @@ function MarketplacePage({
                               return (
                                 <Chip
                                   key={index}
-                                  className={`text-light-text dark:text-dark-text ${
-                                    value === "1"
+                                  className={`text-light-text dark:text-dark-text ${value === "1"
                                       ? "bg-green-500"
                                       : "bg-red-500"
-                                  }`}
+                                    }`}
                                 >
                                   {`overall: ${value === "1" ? "👍" : "👎"}`}
                                 </Chip>
@@ -358,15 +357,13 @@ function MarketplacePage({
                               return (
                                 <Chip
                                   key={index}
-                                  className={`text-light-text dark:text-dark-text ${
-                                    value === "1"
+                                  className={`text-light-text dark:text-dark-text ${value === "1"
                                       ? "bg-green-500"
                                       : "bg-red-500"
-                                  }`}
+                                    }`}
                                 >
-                                  {`${category}: ${
-                                    value === "1" ? "👍" : "👎"
-                                  }`}
+                                  {`${category}: ${value === "1" ? "👍" : "👎"
+                                    }`}
                                 </Chip>
                               );
                             }
@@ -577,11 +574,10 @@ function MarketplacePage({
                   {merchantReview && merchantReview >= 0.5 ? (
                     <>
                       <FaceSmileIcon
-                        className={`h-10 w-10 p-1 ${
-                          merchantReview >= 0.75
+                        className={`h-10 w-10 p-1 ${merchantReview >= 0.75
                             ? "text-green-500"
                             : "text-green-300"
-                        }`}
+                          }`}
                       />
                       <span className="text-light-text dark:text-dark-text mr-2 text-sm whitespace-nowrap">
                         {merchantQuality}
@@ -590,11 +586,10 @@ function MarketplacePage({
                   ) : (
                     <>
                       <FaceFrownIcon
-                        className={`h-10 w-10 p-1 ${
-                          merchantReview >= 0.25
+                        className={`h-10 w-10 p-1 ${merchantReview >= 0.25
                             ? "text-red-300"
                             : "text-red-500"
-                        }`}
+                          }`}
                       />
                       <span className="text-light-text dark:text-dark-text mr-2 text-sm whitespace-nowrap">
                         {merchantQuality}
diff --git a/components/nav-top.tsx b/components/nav-top.tsx
index 3977eb1b..379e5276 100644
--- a/components/nav-top.tsx
+++ b/components/nav-top.tsx
@@ -215,7 +215,7 @@ const TopNav = ({
           {signedIn ? (
             <ProfileWithDropdown
               pubkey={userPubkey!}
-              baseClassname="flex-shrink-0 dark:hover:shopstr-yellow-light rounded-3xl hover:scale-105 hover:bg-light-bg hover:shadow-lg dark:hover:bg-dark-bg"
+              baseClassname="flex-shrink-0 rounded-full transition-opacity hover:opacity-80"
               dropDownKeys={[
                 "shop_profile",
                 "user_profile",
@@ -309,7 +309,7 @@ const TopNav = ({
           {signedIn ? (
             <ProfileWithDropdown
               pubkey={userPubkey!}
-              baseClassname="justify-start dark:hover:shopstr-yellow-light pl-2 rounded-3xl py-2 hover:scale-105 hover:bg-light-bg hover:shadow-lg dark:hover:bg-dark-bg"
+              baseClassname="justify-start pl-2 rounded-full py-2 transition-opacity hover:opacity-80"
               dropDownKeys={[
                 "shop_profile",
                 "user_profile",
diff --git a/components/utility-components/profile/profile-dropdown.tsx b/components/utility-components/profile/profile-dropdown.tsx
index b2cbfe92..76df35c9 100644
--- a/components/utility-components/profile/profile-dropdown.tsx
+++ b/components/utility-components/profile/profile-dropdown.tsx
@@ -319,6 +319,8 @@ export const ProfileWithDropdown = ({
               as="button"
               avatarProps={{
                 src: pfp,
+                size: "sm",
+                className: "rounded-full flex-shrink-0",
               }}
               className={"transition-transform"}
               classNames={{
diff --git a/pages/settings/user-profile.tsx b/pages/settings/user-profile.tsx
index 7435ae37..9a3d19d4 100644
--- a/pages/settings/user-profile.tsx
+++ b/pages/settings/user-profile.tsx
@@ -111,8 +111,8 @@ const UserProfilePage = () => {
             <ShopstrSpinner />
           ) : (
             <>
-              <div className="bg-light-fg dark:bg-dark-fg mb-20 h-40 rounded-lg">
-                <div className="bg-shopstr-purple-light dark:bg-dark-fg relative flex h-40 items-center justify-center rounded-lg">
+              <div className="relative mb-14">
+                <div className="relative flex h-40 items-center justify-center overflow-hidden rounded-lg bg-shopstr-purple-light dark:bg-dark-fg">
                   {watchBanner && (
                     <Image
                       alt={"User banner image"}
@@ -121,36 +121,36 @@ const UserProfilePage = () => {
                     />
                   )}
                   <FileUploaderButton
-                    className={`bg-shopstr-purple absolute right-5 bottom-5 z-20 border-2 border-white shadow-md ${SHOPSTRBUTTONCLASSNAMES}`}
+                    className={`absolute bottom-3 right-3 z-20 border-2 border-white bg-shopstr-purple shadow-md ${SHOPSTRBUTTONCLASSNAMES}`}
                     imgCallbackOnUpload={(imgUrl) => setValue("banner", imgUrl)}
                   >
                     Upload Banner
                   </FileUploaderButton>
                 </div>
-                <div className="flex items-center justify-center">
-                  <div className="relative z-20 mt-[-3rem] h-24 w-24">
-                    <div className="">
-                      <FileUploaderButton
-                        isIconOnly
-                        className={`absolute right-[-0.5rem] bottom-[-0.5rem] z-20 ${SHOPSTRBUTTONCLASSNAMES}`}
-                        imgCallbackOnUpload={(imgUrl) =>
-                          setValue("picture", imgUrl)
-                        }
-                      />
+                <div className="absolute -bottom-12 left-1/2 z-20 -translate-x-1/2">
+                  <div className="relative h-24 w-24">
+                    <div className="h-24 w-24 overflow-hidden rounded-full">
                       {watchPicture ? (
                         <Image
                           src={watchPicture}
                           alt="user profile picture"
-                          className="rounded-full"
+                          className="h-full w-full rounded-full object-cover"
                         />
                       ) : (
                         <Image
                           src={defaultImage}
                           alt="user profile picture"
-                          className="rounded-full"
+                          className="h-full w-full rounded-full object-cover"
                         />
                       )}
                     </div>
+                    <FileUploaderButton
+                      isIconOnly
+                      className={`absolute -bottom-1 -right-1 z-30 transition-transform hover:scale-110 ${SHOPSTRBUTTONCLASSNAMES}`}
+                      imgCallbackOnUpload={(imgUrl) =>
+                        setValue("picture", imgUrl)
+                      }
+                    />
                   </div>
                 </div>
               </div>
diff --git a/styles/globals.css b/styles/globals.css
index ad7f8659..f833cf72 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -51,12 +51,14 @@ html {
   height: 100%;
   overflow: hidden;
   position: relative;
+  scrollbar-gutter: stable;
 }
 
 body {
   height: 100%;
   overflow: auto;
   position: relative;
+  scrollbar-gutter: stable;
 }
 
 .text-xxs {
diff --git a/utils/nostr/fetch-service.ts b/utils/nostr/fetch-service.ts
index 254d0b37..39db6c39 100644
--- a/utils/nostr/fetch-service.ts
+++ b/utils/nostr/fetch-service.ts
@@ -788,15 +788,15 @@ export const fetchReviews = async (
         if (
           !existingReview ||
           createdAt >
-            Number(existingReview.find((item) => item[0] === "created_at")?.[1])
+          Number(existingReview.find((item) => item[0] === "created_at")?.[1])
         ) {
           const updatedReview = existingReview
             ? existingReview.map((item) => {
-                if (item[0] === "created_at") {
-                  return ["created_at", createdAt.toString()];
-                }
-                return item;
-              })
+              if (item[0] === "created_at") {
+                return ["created_at", createdAt.toString()];
+              }
+              return item;
+            })
             : [...ratingTags, ["created_at", createdAt.toString()]];
 
           productReviews.set(event.pubkey, updatedReview);