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:
adminandClaude Sonnet 4.6 committed 2026-06-15 17:23:21 +02:00
1 parent b0d6a4d7d1
commit c9f385a9fa
1 file changed
+9 -6
+9 -6
View File
@@ -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>
</>
);
}