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 6c4928de9..49d68dd29 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 e8286d067..e89b5c9c3 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 3569c2b85..4246abc68 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 021b6a315..849936ec1 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 825a0db89..5952dc036 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 c7c235531..1541413e1 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 8a10f9d30..31327e49a 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}