From 09ab8c54b61f5a50fa372204c205bb36e02ca512 Mon Sep 17 00:00:00 2001
From: an-lee <an.lee.work@gmail.com>
Date: Tue, 10 Dec 2024 12:02:10 +0800
Subject: [PATCH] fix sheet portal (#1237)

---
 .../medias/media-bottom-panel/media-current-recording.tsx | 1 +
 .../renderer/components/messages/assistant-message.tsx    | 1 +
 enjoy/src/renderer/components/ui/alert-dialog.tsx         | 8 ++++++--
 enjoy/src/renderer/components/ui/dialog.tsx               | 8 ++++++--
 enjoy/src/renderer/components/ui/sheet.tsx                | 8 ++++++--
 enjoy/src/renderer/context/chat-session-provider.tsx      | 2 ++
 enjoy/src/renderer/context/course-provider.tsx            | 1 +
 7 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/enjoy/src/renderer/components/medias/media-bottom-panel/media-current-recording.tsx b/enjoy/src/renderer/components/medias/media-bottom-panel/media-current-recording.tsx
index 6c4928de..49d68dd2 100644
--- a/enjoy/src/renderer/components/medias/media-bottom-panel/media-current-recording.tsx
+++ b/enjoy/src/renderer/components/medias/media-bottom-panel/media-current-recording.tsx
@@ -692,6 +692,7 @@ export const MediaCurrentRecording = () => {
 
       <Sheet open={detailIsOpen} onOpenChange={(open) => setDetailIsOpen(open)}>
         <SheetContent
+          container="main-panel-content"
           aria-describedby={undefined}
           side="bottom"
           className="rounded-t-2xl shadow-lg max-h-content overflow-y-scroll"
diff --git a/enjoy/src/renderer/components/messages/assistant-message.tsx b/enjoy/src/renderer/components/messages/assistant-message.tsx
index e8286d06..e89b5c9c 100644
--- a/enjoy/src/renderer/components/messages/assistant-message.tsx
+++ b/enjoy/src/renderer/components/messages/assistant-message.tsx
@@ -295,6 +295,7 @@ export const AssistantMessageComponent = (props: {
         onOpenChange={(value) => setShadowing(value)}
       >
         <SheetContent
+          container="main-panel-content"
           aria-describedby={undefined}
           side="bottom"
           className="h-content p-0 flex flex-col gap-0"
diff --git a/enjoy/src/renderer/components/ui/alert-dialog.tsx b/enjoy/src/renderer/components/ui/alert-dialog.tsx
index 3569c2b8..4246abc6 100644
--- a/enjoy/src/renderer/components/ui/alert-dialog.tsx
+++ b/enjoy/src/renderer/components/ui/alert-dialog.tsx
@@ -30,11 +30,15 @@ AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
-    container?: HTMLElement;
+    container?: HTMLElement | string;
   }
 >(({ className, container, ...props }, ref) => (
   <AlertDialogPortal
-    container={container || document.getElementById("main-panel-content")}
+    container={
+      typeof container === "string"
+        ? document.getElementById(container)
+        : container
+    }
   >
     <AlertDialogOverlay className="absolute inset-0" />
     <AlertDialogPrimitive.Content
diff --git a/enjoy/src/renderer/components/ui/dialog.tsx b/enjoy/src/renderer/components/ui/dialog.tsx
index 021b6a31..849936ec 100644
--- a/enjoy/src/renderer/components/ui/dialog.tsx
+++ b/enjoy/src/renderer/components/ui/dialog.tsx
@@ -32,11 +32,15 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-    container?: HTMLElement;
+    container?: HTMLElement | string;
   }
 >(({ className, children, container, ...props }, ref) => (
   <DialogPortal
-    container={container || document.getElementById("main-panel-content")}
+    container={
+      typeof container === "string"
+        ? document.getElementById(container)
+        : container
+    }
   >
     <DialogOverlay />
     <DialogPrimitive.Content
diff --git a/enjoy/src/renderer/components/ui/sheet.tsx b/enjoy/src/renderer/components/ui/sheet.tsx
index 825a0db8..5952dc03 100644
--- a/enjoy/src/renderer/components/ui/sheet.tsx
+++ b/enjoy/src/renderer/components/ui/sheet.tsx
@@ -53,7 +53,7 @@ interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {
   displayClose?: boolean;
-  container?: HTMLElement;
+  container?: HTMLElement | string;
 }
 
 const SheetContent = React.forwardRef<
@@ -72,7 +72,11 @@ const SheetContent = React.forwardRef<
     ref
   ) => (
     <SheetPortal
-      container={container || document.getElementById("main-panel-content")}
+      container={
+        typeof container === "string"
+          ? document.getElementById(container)
+          : container
+      }
     >
       <SheetOverlay className="absolute" />
       <SheetPrimitive.Content
diff --git a/enjoy/src/renderer/context/chat-session-provider.tsx b/enjoy/src/renderer/context/chat-session-provider.tsx
index c7c23553..1541413e 100644
--- a/enjoy/src/renderer/context/chat-session-provider.tsx
+++ b/enjoy/src/renderer/context/chat-session-provider.tsx
@@ -481,6 +481,7 @@ export const ChatSessionProvider = ({
           }}
         >
           <SheetContent
+            container="main-panel-content"
             side="bottom"
             className="h-content p-0 flex flex-col gap-0"
             displayClose={false}
@@ -506,6 +507,7 @@ export const ChatSessionProvider = ({
           }}
         >
           <SheetContent
+            container="main-panel-content"
             aria-describedby={undefined}
             side="bottom"
             className="rounded-t-2xl shadow-lg max-h-content overflow-y-scroll"
diff --git a/enjoy/src/renderer/context/course-provider.tsx b/enjoy/src/renderer/context/course-provider.tsx
index 8a10f9d3..31327e49 100644
--- a/enjoy/src/renderer/context/course-provider.tsx
+++ b/enjoy/src/renderer/context/course-provider.tsx
@@ -71,6 +71,7 @@ export const CourseProvider = ({
           }}
         >
           <SheetContent
+            container="main-panel-content"
             side="bottom"
             className="h-content p-0 flex flex-col gap-0"
             displayClose={false}