Use a column layout for MobilePageContent in PlatformAwareSheet

This is so the header is outside the scrolling area and the content can grow/scroll independently. This now matches the way it's done in classification
This commit is contained in:
Josh Hawkins 2025-11-07 07:09:12 -06:00
parent ab43a33d19
commit 4ab9fd114f

View File

@ -20,6 +20,7 @@ import {
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
import { cn } from "@/lib/utils";
import { isMobile } from "react-device-detect";
type PlatformAwareDialogProps = {
@ -86,14 +87,16 @@ export function PlatformAwareSheet({
{trigger}
</MobilePageTrigger>
<MobilePagePortal>
<MobilePageContent className="h-full overflow-hidden">
<MobilePageContent className="flex h-full flex-col">
<MobilePageHeader
className="mx-2"
onClose={() => onOpenChange(false)}
>
<MobilePageTitle>{title}</MobilePageTitle>
</MobilePageHeader>
<div className={contentClassName}>{content}</div>
<div className={cn("flex-1 overflow-y-auto", contentClassName)}>
{content}
</div>
</MobilePageContent>
</MobilePagePortal>
</MobilePage>