♻️(frontend) clean Sonar warnings in PiP overlay primitives

Replace verbose checks and nested ternaries with clearer PiP-safe logic.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/frontend/src/features/pip/components/DocumentPiPPortal.tsx

@@ -33,11 +33,11 @@ const copyStyles = (source: Document, target: Document) => {
 }
 
 const syncThemeAttribute = (source: Document, target: Document) => {
-  const theme = source.documentElement.getAttribute('data-lk-theme')
+  const theme = source.documentElement.dataset.lkTheme
   if (theme) {
-    target.documentElement.setAttribute('data-lk-theme', theme)
+    target.documentElement.dataset.lkTheme = theme
   } else {
-    target.documentElement.removeAttribute('data-lk-theme')
+    delete target.documentElement.dataset.lkTheme
   }
 }
 

src/frontend/src/features/pip/components/RoomPiP.tsx

@@ -26,5 +26,5 @@ export const RoomPiP = (): ReactNode => {
     onClose: close,
     children: <PipView />,
   })
-  return portal as ReactNode
+  return portal
 }

src/frontend/src/features/pip/hooks/useRoomPiP.tsx

@@ -5,7 +5,8 @@ import { roomPiPStore } from '@/stores/roomPiP'
 export const useRoomPiP = () => {
   const { isOpen } = useSnapshot(roomPiPStore)
   const isSupported =
-    typeof globalThis !== 'undefined' && 'documentPictureInPicture' in globalThis
+    typeof globalThis !== 'undefined' &&
+    'documentPictureInPicture' in globalThis
 
   const open = useCallback(() => {
     roomPiPStore.isOpen = true

src/frontend/src/primitives/Menu.tsx

@@ -28,8 +28,7 @@ export const Menu = ({
   // Detect if we're in PiP: portal container is in a different document than the main window
   const isInPiP = useMemo(
     () =>
-      portalContainer &&
+      !!portalContainer?.ownerDocument &&
-      portalContainer.ownerDocument &&
       portalContainer.ownerDocument !== document,
     [portalContainer]
   )

src/frontend/src/primitives/TooltipWrapper.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react'
+import { type ReactElement, type ReactNode } from 'react'
 import {
   OverlayArrow,
   Tooltip as RACTooltip,
@@ -27,11 +27,12 @@ export const TooltipWrapper = ({
   tooltipType,
   children,
 }: {
-  children: ReactNode
+  children: ReactElement
 } & TooltipWrapperProps) => {
   const portalContainer = useOverlayPortalContainer()
   const isExternalDocument =
-    portalContainer && portalContainer.ownerDocument !== document
+    !!portalContainer?.ownerDocument &&
+    portalContainer.ownerDocument !== document
 
   return tooltip ? (
     isExternalDocument ? (

src/frontend/src/primitives/VisualOnlyTooltip.tsx

@@ -113,6 +113,20 @@ export const VisualOnlyTooltip = ({
       })
     : children
 
+  const translateY = effectiveBottom ? 'translateY(0)' : 'translateY(-100%)'
+  const translateXY = effectiveBottom
+    ? 'translate(-50%, 0)'
+    : 'translate(-50%, -100%)'
+
+  const tooltipInlineStyle: React.CSSProperties & Record<string, string> = {
+    top: `${position?.top}px`,
+    left: computedStyle ? `${computedStyle.left}px` : `${position?.left}px`,
+    transform: computedStyle ? translateY : translateXY,
+    ...(computedStyle
+      ? { '--tooltip-arrow-left': `${computedStyle.arrowLeft}px` }
+      : null),
+  }
+
   return (
     <>
       <div
@@ -160,24 +174,7 @@ export const VisualOnlyTooltip = ({
                     }),
               },
             })}
-            style={{
+            style={tooltipInlineStyle}
-              top: `${position.top}px`,
-              left: computedStyle
-                ? `${computedStyle.left}px`
-                : `${position.left}px`,
-              transform: computedStyle
-                ? effectiveBottom
-                  ? 'translateY(0)'
-                  : 'translateY(-100%)'
-                : effectiveBottom
-                  ? 'translate(-50%, 0)'
-                  : 'translate(-50%, -100%)',
-              ...(computedStyle
-                ? {
-                    '--tooltip-arrow-left': `${computedStyle.arrowLeft}px`,
-                  }
-                : null),
-            }}
           >
             {tooltip}
           </div>,