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>
61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import { ArrowRight, User } from "lucide-react";
|
||
import { ThreadParticipant, ThreadDetail } from "../../../src/api/types/models";
|
||
import { Link, useNavigate } from "@remix-run/react";
|
||
import SellerLogo from "~/components/SellerLogo";
|
||
import { useRootData } from "~/hooks/use-root-data";
|
||
import { safeGoBack } from "~/utils/helpers";
|
||
// Header component for the chat
|
||
const ChatHeader = ({
|
||
otherParticipant,
|
||
isConnected,
|
||
threadDetails,
|
||
}: {
|
||
otherParticipant: ThreadParticipant | undefined;
|
||
isConnected: boolean;
|
||
threadDetails: ThreadDetail | undefined;
|
||
}) => {
|
||
const { theme } = useRootData();
|
||
const navigate = useNavigate();
|
||
return (
|
||
<div className="max-w-md mx-auto flex flex-row h-[calc(65px_+_env(safe-area-inset-top))] pt-[env(safe-area-inset-top)] bg-WHITE fixed top-0 left-0 w-full items-center justify-center border-b border-inner-border z-10">
|
||
<ArrowRight
|
||
onClick={() => safeGoBack(navigate)}
|
||
className="absolute top-[calc(1.25rem_+_env(safe-area-inset-top))] right-5"
|
||
/>
|
||
{isConnected ? (
|
||
<Link
|
||
to={`/seller/${otherParticipant?.storeUsername}`}
|
||
className="flex gap-2"
|
||
>
|
||
{threadDetails?.isCreator ? (
|
||
<SellerLogo
|
||
src={otherParticipant?.storeLogo}
|
||
alt={"seller-image"}
|
||
/>
|
||
) : (
|
||
<User
|
||
size={48}
|
||
className={theme === "dark" ? "text-WHITE" : "text-BLACK"}
|
||
/>
|
||
)}
|
||
<div
|
||
className="flex flex-col items-center justify-center"
|
||
style={{ gap: "0" }}
|
||
>
|
||
<p className="text-B12 font-bold text-overflow-ellipsis overflow-hidden whitespace-nowrap">
|
||
{threadDetails?.isCreator
|
||
? otherParticipant?.storeName || otherParticipant?.username
|
||
: otherParticipant?.name}
|
||
</p>
|
||
</div>
|
||
</Link>
|
||
) : (
|
||
<div className="flex items-center justify-center h-full">
|
||
<p className="text-R12 text-GRAY">در حال اتصال...</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
export default ChatHeader;
|