Arda Samadi
b4d5f8d8db
Content was drawing under the iOS status bar and home indicator because the app uses viewport-fit=cover + black-translucent but the fixed/sticky chrome didn't reserve the safe areas. - bottom nav (MyLayout): move the 50px row into an inner box and let the bar extend by env(safe-area-inset-bottom) so icons sit above the home indicator (previously the fixed height clipped the inset padding). - top headers gain env(safe-area-inset-top): HomePageTopBar, ExploreTopBar, SearchTopBar, CartHeader, ChatHeader, and wrapper-padded HeaderWithSupport / ProfilePagesHeader (so their absolutely-positioned buttons shift too). - chat input pads bottom by the inset; chat scroll area height accounts for the taller header/input. - _index.tsx no longer overrides the viewport meta (it was dropping viewport-fit=cover on the home page); the global one in root.tsx wins. env(safe-area-inset-*) is 0 on non-notch devices, so desktop/Android render identically — only iOS gains the padding. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
import { memo, useCallback } from "react";
|
|
import { useNavigate } from "@remix-run/react";
|
|
import { safeGoBack } from "~/utils/helpers";
|
|
|
|
interface ProfilePagesHeaderProps {
|
|
title: string;
|
|
hideBackButton?: boolean;
|
|
rightContent?: React.ReactNode;
|
|
}
|
|
|
|
const ProfilePagesHeader = memo(function ProfilePagesHeader({
|
|
title,
|
|
hideBackButton,
|
|
rightContent,
|
|
}: ProfilePagesHeaderProps) {
|
|
const navigate = useNavigate();
|
|
const handleBack = useCallback(() => {
|
|
safeGoBack(navigate);
|
|
}, [navigate]);
|
|
|
|
return (
|
|
<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] bg-WHITE w-full items-center justify-center border-b border-inner-border">
|
|
{!hideBackButton && (
|
|
<ArrowRight
|
|
onClick={handleBack}
|
|
className="absolute top-5 right-5 cursor-pointer"
|
|
/>
|
|
)}
|
|
<p className="text-B16 font-bold">{title}</p>
|
|
{rightContent && (
|
|
<div className="absolute top-4 left-4">{rightContent}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default ProfilePagesHeader;
|