Sotoontech/Vitron-Front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pwa): top safe-area inset on products page + owner product carousel

Browse Source 
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>
This commit is contained in:
Arda Samadi 2026-07-13 15:16:28 +03:30
parent 2cf1224107
commit 7a385ba18e
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/product/ProductImageCarousel.tsx
View File

@ -163,13 +163,15 @@ export const ProductImageCarousel = ({
<> <>
<button <button
onClick={handleSettingsClick} 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" /> <EllipsisVertical size={20} className="text-WHITE2" />
</button> </button>
<button <button
onClick={() => safeGoBack(navigate)} 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" /> <ArrowRight size={20} className="text-WHITE2" />
</button> </button>

5
app/routes/store.$storeId.products.tsx
View File

@ -319,7 +319,10 @@ function StoreProductsContent() {
} }
return ( 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 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> <div>
<h1 className="text-lg font-semibold text-right lg:text-[24px] lg:font-extrabold"> <h1 className="text-lg font-semibold text-right lg:text-[24px] lg:font-extrabold">