From 7a385ba18ee28fefa35962a2a70e310c0253dc8d Mon Sep 17 00:00:00 2001
From: Arda Samadi <arda.samadi2010@gmail.com>
Date: Mon, 13 Jul 2026 15:16:28 +0330
Subject: [PATCH] fix(pwa): top safe-area inset on products page + owner
 product carousel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two more iOS-notch overlaps:
- Seller محصولات page: top container now carries pt-[env(safe-area-inset-top)]
  on mobile (lg:pt-0) so the heading drops below the notch.
- Owner single-product view: the carousel's ⋮/back buttons sat at top-3 (under
  the notch); offset them by calc(env(safe-area-inset-top,0px)+12px), matching
  the buyer back button. Only the owner buttons (product detail, top of screen)
  use this — grid tiles don't pass isOwner.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/components/product/ProductImageCarousel.tsx | 6 ++++--
 app/routes/store.$storeId.products.tsx          | 5 ++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/components/product/ProductImageCarousel.tsx b/app/components/product/ProductImageCarousel.tsx
index c3b873f..504f3d1 100644
--- a/app/components/product/ProductImageCarousel.tsx
+++ b/app/components/product/ProductImageCarousel.tsx
@@ -163,13 +163,15 @@ export const ProductImageCarousel = ({
         <>
           <button
             onClick={handleSettingsClick}
-            className="absolute top-3 left-2 z-10 bg-DARK_OVERLAY/90 text-WHITE2 rounded-full h-9 w-9 flex items-center justify-center hover:bg-DARK_OVERLAY_HOVER transition-colors"
+            style={{ top: "calc(env(safe-area-inset-top, 0px) + 12px)" }}
+            className="absolute left-2 z-10 bg-DARK_OVERLAY/90 text-WHITE2 rounded-full h-9 w-9 flex items-center justify-center hover:bg-DARK_OVERLAY_HOVER transition-colors"
           >
             <EllipsisVertical size={20} className="text-WHITE2" />
           </button>
           <button
             onClick={() => safeGoBack(navigate)}
-            className="absolute top-3 right-2 z-10 bg-DARK_OVERLAY/90 text-WHITE2 rounded-full h-9 w-9 flex items-center justify-center hover:bg-DARK_OVERLAY_HOVER transition-colors"
+            style={{ top: "calc(env(safe-area-inset-top, 0px) + 12px)" }}
+            className="absolute right-2 z-10 bg-DARK_OVERLAY/90 text-WHITE2 rounded-full h-9 w-9 flex items-center justify-center hover:bg-DARK_OVERLAY_HOVER transition-colors"
           >
             <ArrowRight size={20} className="text-WHITE2" />
           </button>
diff --git a/app/routes/store.$storeId.products.tsx b/app/routes/store.$storeId.products.tsx
index b104daa..e1f2b52 100644
--- a/app/routes/store.$storeId.products.tsx
+++ b/app/routes/store.$storeId.products.tsx
@@ -319,7 +319,10 @@ function StoreProductsContent() {
   }
 
   return (
-    <div ref={containerRef} className="bg-WHITE lg:bg-transparent">
+    <div
+      ref={containerRef}
+      className="bg-WHITE lg:bg-transparent pt-[env(safe-area-inset-top)] lg:pt-0"
+    >
       <div className="border-b border-gray-200 px-4 py-3 lg:border-0 lg:px-0 lg:py-0 lg:mb-6 lg:flex lg:items-end lg:justify-between">
         <div>
           <h1 className="text-lg font-semibold text-right lg:text-[24px] lg:font-extrabold">