From c9f385a9fa77c74f0a77e0ff605d9b520d51f93e Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Mon, 15 Jun 2026 17:23:21 +0200
Subject: [PATCH] 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>
---
 src/components/profile/ProfileTabs.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/profile/ProfileTabs.tsx b/src/components/profile/ProfileTabs.tsx
index 5212a90..2175302 100644
--- a/src/components/profile/ProfileTabs.tsx
+++ b/src/components/profile/ProfileTabs.tsx
@@ -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>
     </>
   );
 }