fix(profile): replace bottom sheet with centered dialog for post detail
- Sheet side=bottom was anchored to screen bottom edge - Default SheetContent X button overlapped PostCard 3-dot menu - Dialog renders centered, showCloseButton=false removes the X (backdrop click / Escape still closes; 3-dots remain the only top-right control) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
1 parent
b0d6a4d7d1
commit
c9f385a9fa
1 file changed
+9
-6
@@ -5,7 +5,7 @@ import { Layers2 } from "lucide-react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useTRPC } from "@/trpc/client";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Sheet, SheetContent } from "@/components/ui/sheet";
|
||||
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
||||
import { MilestoneCard } from "@/components/feed/MilestoneCard";
|
||||
import { PostCard } from "@/components/feed/PostCard";
|
||||
import { getMediaUrl } from "@/lib/media-url";
|
||||
@@ -117,9 +117,12 @@ export function ProfileTabs({ petId }: ProfileTabsProps) {
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{/* Post detail sheet — opens full PostCard when a grid thumbnail is tapped */}
|
||||
<Sheet open={!!selectedPost} onOpenChange={(open) => { if (!open) setSelectedPost(null); }}>
|
||||
<SheetContent side="bottom" className="h-auto max-h-[92dvh] overflow-y-auto p-0">
|
||||
{/* Post detail dialog — centered overlay, no X button (3-dots in PostCard header handles options) */}
|
||||
<Dialog open={!!selectedPost} onOpenChange={(open) => { if (!open) setSelectedPost(null); }}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className="max-w-[560px] w-full p-0 overflow-y-auto max-h-[90dvh] rounded-xl"
|
||||
>
|
||||
{selectedPost && (
|
||||
<PostCard
|
||||
post={selectedPost}
|
||||
@@ -127,8 +130,8 @@ export function ProfileTabs({ petId }: ProfileTabsProps) {
|
||||
onDeleted={() => setSelectedPost(null)}
|
||||
/>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user