(fix): recharts warnings

(fix): fullscreen popovers not showing
(qol): update todo

packages/call/src/components/buttons/invite.tsx

@@ -1,7 +1,8 @@
+import { useEffect, useState } from "react";
 import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
 import Wrapper from "@tensamin/user/wrapper";
 import { Mail } from "lucide-react";
-import { sendCallInvite } from "../../store";
+import { sendCallInvite, useCall } from "../../store";
 import { log, toast } from "@tensamin/shared/log";
 import { useSession } from "@tensamin/storage/session";
 
@@ -13,6 +14,12 @@ export default function InviteButton({
   iconSize?: number;
 }) {
   const { contacts } = useSession();
+  const screenRef = useCall((state) => state.screenRef);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>();
+
+  useEffect(() => {
+    setPortalContainer(screenRef?.current ?? undefined);
+  }, [screenRef]);
 
   return (
     <Popover>
@@ -23,7 +30,10 @@ export default function InviteButton({
           </Button>
         }
       />
-      <PopoverContent className="flex w-40 flex-col gap-0.5 p-1!">
+      <PopoverContent
+        className="flex w-40 flex-col gap-0.5 p-1!"
+        portalProps={{ container: portalContainer }}
+      >
         {contacts.map((contact) => (
           <Wrapper
             key={contact.user_id}

packages/call/src/components/buttons/screenshare.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
 import { MonitorDot, ScreenShare } from "lucide-react";
 import { toast } from "@tensamin/shared/log";
@@ -14,9 +14,15 @@ export default function ScreenshareButton({
   iconSize?: number;
 }) {
   const isScreensharing = useCall((state) => state.screenShareEnabled);
+  const screenRef = useCall((state) => state.screenRef);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>();
   const [dialogOpen, setDialogOpen] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
 
+  useEffect(() => {
+    setPortalContainer(screenRef?.current ?? undefined);
+  }, [screenRef]);
+
   async function startWebShare() {
     try {
       await setScreenShareEnabled(true, {
@@ -66,7 +72,10 @@ export default function ScreenshareButton({
             </Button>
           }
         />
-        <PopoverContent className="flex w-40 flex-col gap-2">
+        <PopoverContent
+          className="flex w-40 flex-col gap-2"
+          portalProps={{ container: portalContainer }}
+        >
           <Button
             disabled={isScreensharing}
             onClick={() => {
@@ -101,6 +110,7 @@ export default function ScreenshareButton({
           open={dialogOpen}
           onOpenChange={setDialogOpen}
           isScreensharing={isScreensharing}
+          portalContainer={portalContainer}
         />
       )}
     </>