From f624dc737577f1bd8af6ea543243ac8649a15d7b Mon Sep 17 00:00:00 2001
From: Alois <aloisianer@proton.me>
Date: Thu, 14 May 2026 16:05:05 +0200
Subject: [PATCH] (fix): wrong portal for sidebarBox (qol): update todo

---
 .../call/src/components/buttons/screenshare.tsx   | 15 ++++++++++++---
 packages/call/src/components/sidebarBox.tsx       |  2 +-
 packages/call/todo.md                             |  1 +
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/call/src/components/buttons/screenshare.tsx b/packages/call/src/components/buttons/screenshare.tsx
index 4471539..21ba118 100644
--- a/packages/call/src/components/buttons/screenshare.tsx
+++ b/packages/call/src/components/buttons/screenshare.tsx
@@ -18,10 +18,12 @@ export default function ScreenshareButton({
   className,
   iconSize,
   tooltip,
+  defaultPortal,
 }: {
   className?: string;
   iconSize?: number;
   tooltip?: string;
+  defaultPortal?: boolean;
 }) {
   const isScreensharing = useCall((state) => state.screenShareEnabled);
   const screenRef = useCall((state) => state.screenRef);
@@ -30,8 +32,9 @@ export default function ScreenshareButton({
   const [menuOpen, setMenuOpen] = useState(false);
 
   useEffect(() => {
+    if (defaultPortal) return;
     setPortalContainer(screenRef?.current ?? undefined);
-  }, [screenRef]);
+  }, [screenRef, defaultPortal]);
 
   async function startWebShare() {
     try {
@@ -110,7 +113,9 @@ export default function ScreenshareButton({
           />
           <PopoverContent
             className="flex w-40 flex-col gap-2"
-            portalProps={{ container: portalContainer }}
+            portalProps={{
+              container: defaultPortal ? undefined : portalContainer,
+            }}
           >
             <Button
               disabled={isScreensharing}
@@ -141,7 +146,11 @@ export default function ScreenshareButton({
           </PopoverContent>
         </Popover>
         {tooltip && (
-          <TooltipContent portalProps={{ container: portalContainer }}>
+          <TooltipContent
+            portalProps={{
+              container: defaultPortal ? undefined : portalContainer,
+            }}
+          >
             {tooltip}
           </TooltipContent>
         )}
diff --git a/packages/call/src/components/sidebarBox.tsx b/packages/call/src/components/sidebarBox.tsx
index bf90e93..6a850f0 100644
--- a/packages/call/src/components/sidebarBox.tsx
+++ b/packages/call/src/components/sidebarBox.tsx
@@ -31,7 +31,7 @@ export default function SidebarBox() {
         <div className="flex justify-start gap-1">
           <MuteButton className="w-9 h-9" />
           <DeafButton className="w-9 h-9" />
-          <ScreenshareButton className="w-9 h-9" />
+          <ScreenshareButton className="w-9 h-9" defaultPortal />
           <LeaveButton className="w-9 h-9" />
         </div>
       </CardContent>
diff --git a/packages/call/todo.md b/packages/call/todo.md
index 952858f..1a9c0d1 100644
--- a/packages/call/todo.md
+++ b/packages/call/todo.md
@@ -11,3 +11,4 @@
   - Disconnect
 - Desktop-App screenshares
 - Context menus
+- Popout Window