From d694040bf782e0df9c708496d377af0d3fc0e481 Mon Sep 17 00:00:00 2001
From: Arda Samadi <arda.samadi2010@gmail.com>
Date: Mon, 13 Jul 2026 13:21:17 +0330
Subject: [PATCH] fix(pwa): apply top safe-area inset to page headers (iOS
 notch)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

MyLayout only pads the bottom inset globally; each top bar must add its own
top inset. Several inline page headers omitted it, so their content slid
under the notch in the iOS standalone PWA (home was fine — its bar has it).

Wrap the back-button headers the same way ProfilePagesHeader already does
(outer sticky element carries pt-[env(safe-area-inset-top)]; inner relative
bar holds the content) so the absolute back arrow stays out of the notch.
Fixed: /profile hub, /discounts, /collections, /collection/:id, /sellers,
seller store index, and financial transactions.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/routes/collection.$id.tsx                 | 42 +++++++++++--------
 app/routes/collections.tsx                    | 14 ++++---
 app/routes/discounts.tsx                      | 14 ++++---
 app/routes/profile._index.tsx                 |  2 +-
 app/routes/sellers.tsx                        | 14 ++++---
 app/routes/store.$storeId._index.tsx          |  2 +-
 ...oreId.financial-dashboard.transactions.tsx | 42 ++++++++++---------
 7 files changed, 72 insertions(+), 58 deletions(-)

diff --git a/app/routes/collection.$id.tsx b/app/routes/collection.$id.tsx
index 425dc42..766827c 100644
--- a/app/routes/collection.$id.tsx
+++ b/app/routes/collection.$id.tsx
@@ -61,12 +61,14 @@ export default function CollectionDetail() {
     return (
       <div className="flex flex-col min-h-screen bg-WHITE pb-20">
         {/* Header */}
-        <div className="flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border">
-          <ArrowRight
-            onClick={handleBack}
-            className="absolute top-5 right-5 cursor-pointer"
-          />
-          <p className="text-B16 font-bold">جزئیات کالکشن</p>
+        <div className="sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
+          <div className="relative flex flex-row h-[65px] w-full items-center justify-center border-b border-inner-border">
+            <ArrowRight
+              onClick={handleBack}
+              className="absolute top-5 right-5 cursor-pointer"
+            />
+            <p className="text-B16 font-bold">جزئیات کالکشن</p>
+          </div>
         </div>
 
         {/* Loading Skeleton */}
@@ -94,12 +96,14 @@ export default function CollectionDetail() {
     return (
       <div className="flex flex-col min-h-screen bg-WHITE pb-20">
         {/* Header */}
-        <div className="flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border">
-          <ArrowRight
-            onClick={handleBack}
-            className="absolute top-5 right-5 cursor-pointer"
-          />
-          <p className="text-B16 font-bold">جزئیات کالکشن</p>
+        <div className="sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
+          <div className="relative flex flex-row h-[65px] w-full items-center justify-center border-b border-inner-border">
+            <ArrowRight
+              onClick={handleBack}
+              className="absolute top-5 right-5 cursor-pointer"
+            />
+            <p className="text-B16 font-bold">جزئیات کالکشن</p>
+          </div>
         </div>
 
         {/* Error State */}
@@ -130,12 +134,14 @@ export default function CollectionDetail() {
   return (
     <div className="flex flex-col min-h-screen bg-WHITE pb-20">
       {/* Header (mobile) */}
-      <div className="lg:hidden flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border">
-        <ArrowRight
-          onClick={handleBack}
-          className="absolute top-5 right-5 cursor-pointer"
-        />
-        <p className="text-B16 font-bold">جزئیات کالکشن</p>
+      <div className="lg:hidden sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
+        <div className="relative flex flex-row h-[65px] w-full items-center justify-center border-b border-inner-border">
+          <ArrowRight
+            onClick={handleBack}
+            className="absolute top-5 right-5 cursor-pointer"
+          />
+          <p className="text-B16 font-bold">جزئیات کالکشن</p>
+        </div>
       </div>
 
       {/* Content */}
diff --git a/app/routes/collections.tsx b/app/routes/collections.tsx
index b360846..8c02310 100644
--- a/app/routes/collections.tsx
+++ b/app/routes/collections.tsx
@@ -118,12 +118,14 @@ export default function Collections() {
   return (
     <div className="flex flex-col bg-WHITE pb-20">
       {/* Header (mobile) */}
-      <div className="lg:hidden flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border">
-        <ArrowRight
-          onClick={handleBack}
-          className="absolute top-5 right-5 cursor-pointer"
-        />
-        <p className="text-B16 font-bold">کالکشن‌ها</p>
+      <div className="lg:hidden sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
+        <div className="relative flex flex-row h-[65px] w-full items-center justify-center border-b border-inner-border">
+          <ArrowRight
+            onClick={handleBack}
+            className="absolute top-5 right-5 cursor-pointer"
+          />
+          <p className="text-B16 font-bold">کالکشن‌ها</p>
+        </div>
       </div>
 
       {/* Content */}
diff --git a/app/routes/discounts.tsx b/app/routes/discounts.tsx
index 937ce59..238f589 100644
--- a/app/routes/discounts.tsx
+++ b/app/routes/discounts.tsx
@@ -25,12 +25,14 @@ export default function Discounts() {
   return (
     <div className="flex flex-col bg-WHITE pb-20">
       {/* Header (mobile) */}
-      <div className="lg:hidden flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border">
-        <ArrowRight
-          onClick={handleBack}
-          className="absolute top-5 right-5 cursor-pointer"
-        />
-        <p className="text-B16 font-bold">تخفیف‌ها</p>
+      <div className="lg:hidden sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
+        <div className="relative flex flex-row h-[65px] w-full items-center justify-center border-b border-inner-border">
+          <ArrowRight
+            onClick={handleBack}
+            className="absolute top-5 right-5 cursor-pointer"
+          />
+          <p className="text-B16 font-bold">تخفیف‌ها</p>
+        </div>
       </div>
 
       {/* Content */}
diff --git a/app/routes/profile._index.tsx b/app/routes/profile._index.tsx
index bdbe81d..bd6c7ac 100644
--- a/app/routes/profile._index.tsx
+++ b/app/routes/profile._index.tsx
@@ -199,7 +199,7 @@ export default function Profile() {
       {/* Mobile: account hub */}
       <div className="flex flex-col gap-0 lg:hidden">
         {/* Header: avatar + name + phone + edit */}
-        <div className="flex items-center gap-3.5 px-4 pt-4 pb-3">
+        <div className="flex items-center gap-3.5 px-4 pt-[calc(1rem_+_env(safe-area-inset-top))] pb-3">
           <CircleUserRound size={56} className="text-GRAY shrink-0" />
           <div className="min-w-0 flex-1">
             <h2 className="text-B16 font-bold truncate">
diff --git a/app/routes/sellers.tsx b/app/routes/sellers.tsx
index 9fdfa6d..05bff25 100644
--- a/app/routes/sellers.tsx
+++ b/app/routes/sellers.tsx
@@ -62,12 +62,14 @@ export default function Sellers() {
   return (
     <div className="flex flex-col bg-WHITE pb-20">
       {/* Header (mobile) */}
-      <div className="lg:hidden flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border">
-        <ArrowRight
-          onClick={handleBack}
-          className="absolute top-5 right-5 cursor-pointer"
-        />
-        <p className="text-B16 font-bold">فروشگاه‌ها</p>
+      <div className="lg:hidden sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
+        <div className="relative flex flex-row h-[65px] w-full items-center justify-center border-b border-inner-border">
+          <ArrowRight
+            onClick={handleBack}
+            className="absolute top-5 right-5 cursor-pointer"
+          />
+          <p className="text-B16 font-bold">فروشگاه‌ها</p>
+        </div>
       </div>
 
       {/* Content */}
diff --git a/app/routes/store.$storeId._index.tsx b/app/routes/store.$storeId._index.tsx
index 88b7358..db90e94 100644
--- a/app/routes/store.$storeId._index.tsx
+++ b/app/routes/store.$storeId._index.tsx
@@ -558,7 +558,7 @@ function SellerDetailHeader({
   };
 
   return (
-    <div className="flex px-4 w-full justify-between items-center sticky top-0 z-30 bg-WHITE">
+    <div className="flex px-4 w-full justify-between items-center sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
       <ArrowRight size={24} onClick={() => safeGoBack(navigate)} />
       <div className="flex flex-col gap-2 py-4 items-center">
         <SellerLogo src={sellerData?.storeLogo} alt="Seller Logo" />
diff --git a/app/routes/store.$storeId.financial-dashboard.transactions.tsx b/app/routes/store.$storeId.financial-dashboard.transactions.tsx
index 0490c0a..6fbaf66 100644
--- a/app/routes/store.$storeId.financial-dashboard.transactions.tsx
+++ b/app/routes/store.$storeId.financial-dashboard.transactions.tsx
@@ -136,27 +136,29 @@ export default function Transactions() {
   return (
     <div className="bg-WHITE lg:max-w-[900px] lg:mx-auto lg:w-full lg:pt-6">
       {/* Header (keeps the filter button; just constrained on desktop) */}
-      <div className="flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border lg:static lg:justify-start lg:gap-3">
-        <ArrowRight onClick={handleBack} className="absolute top-5 right-5 lg:hidden" />
-        <p className={"text-B16 lg:text-[28px] font-bold lg:font-extrabold"}>لیست تراکنش‌ها</p>
-        <div
-          onClick={() => {
-            filterIconClicked();
-          }}
-          role="button"
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
+      <div className="sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)] lg:static lg:pt-0">
+        <div className="relative flex flex-row h-[65px] w-full items-center justify-center border-b border-inner-border lg:justify-start lg:gap-3">
+          <ArrowRight onClick={handleBack} className="absolute top-5 right-5 lg:hidden" />
+          <p className={"text-B16 lg:text-[28px] font-bold lg:font-extrabold"}>لیست تراکنش‌ها</p>
+          <div
+            onClick={() => {
               filterIconClicked();
-            }
-          }}
-          className="absolute top-4 h-8 w-8 left-5 rounded-full bg-WHITE shadow-xl flex items-center justify-center"
-        >
-          <img
-            src={theme === "dark" ? filterIconDark : filterIcon}
-            alt="filter"
-            className="w-6 h-6"
-          />
+            }}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                filterIconClicked();
+              }
+            }}
+            className="absolute top-4 h-8 w-8 left-5 rounded-full bg-WHITE shadow-xl flex items-center justify-center"
+          >
+            <img
+              src={theme === "dark" ? filterIconDark : filterIcon}
+              alt="filter"
+              className="w-6 h-6"
+            />
+          </div>
         </div>
       </div>
       <div className="flex flex-col w-full">