@100mslive/roomkit-react 0.1.8-alpha.0 → 0.1.9-alpha.0

package/src/Prebuilt/components/Polls/common/StatusIndicator.jsx

@@ -0,0 +1,47 @@
+// @ts-check
+import React from 'react';
+import { Flex, Text } from '../../../../';
+
+export const StatusIndicator = ({ isLive, shouldShowTimer }) => {
+  return (
+    <Flex align="center">
+      <Flex
+        css={{
+          backgroundColor: isLive ? '$alert_error_default' : '$secondary_default',
+          p: '$2 $4',
+          borderRadius: shouldShowTimer ? '$0 0 0 $0' : '$0',
+        }}
+      >
+        <Text
+          variant="caption"
+          css={{
+            fontWeight: '$semiBold',
+            color: '$on_surface_high',
+          }}
+        >
+          {isLive ? 'LIVE' : 'ENDED'}
+        </Text>
+      </Flex>
+
+      {shouldShowTimer ? (
+        <Flex
+          css={{
+            borderRadius: '0 $0 $0 0',
+            p: '$2 $4',
+            backgroundColor: '$background_default',
+          }}
+        >
+          <Text
+            variant="caption"
+            css={{
+              fontWeight: '$semiBold',
+              color: '$on_surface_high',
+            }}
+          >
+            0:32
+          </Text>
+        </Flex>
+      ) : null}
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Polls/common/VoteCount.jsx

@@ -0,0 +1,28 @@
+// @ts-check
+import React from 'react';
+import { Flex, Text } from '../../../../';
+
+export const VoteCount = ({ isQuiz, voteCount, isCorrectAnswer }) => {
+  return (
+    <Flex css={{ alignItems: 'center' }}>
+      {isQuiz && (
+        <Text
+          variant="xs"
+          css={{
+            p: '$2',
+            mr: '$2',
+            color: isCorrectAnswer ? '$alert_success' : '$alert_error_default',
+            borderRadius: '$1',
+            border: `1px solid ${isCorrectAnswer ? '$alert_success' : '$alert_error_default'}`,
+          }}
+        >
+          {isCorrectAnswer ? 'Correct' : 'Incorrect'}
+        </Text>
+      )}
+      <Text variant="sm" css={{ color: '$on_surface_medium' }}>
+        {voteCount}&nbsp;
+        {voteCount === 1 ? 'vote' : 'votes'}
+      </Text>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Polls/common/VoteProgress.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Progress } from '../../../../';
+
+export const VoteProgress = ({ option, totalResponses }) => {
+  const showProgress = typeof option.voteCount === 'number' && typeof totalResponses === 'number' && totalResponses > 0;
+  const progressValue = (100 * option.voteCount) / totalResponses;
+
+  return showProgress ? (
+    <Progress.Root value={progressValue}>
+      <Progress.Content
+        style={{
+          transform: `translateX(-${100 - progressValue}%)`,
+        }}
+      />
+    </Progress.Root>
+  ) : null;
+};

package/src/Prebuilt/components/Polls/common/VoterList.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Avatar, Flex, Text } from '../../../../';
+
+export const VoterList = ({ voters }) => {
+  return voters.map((voter, index) => (
+    <Flex align="center" key={`${voter}-${index}`} css={{ gap: '$4', py: '$2' }}>
+      <Avatar
+        name={voter}
+        css={{
+          position: 'relative',
+          transform: 'unset',
+          fontSize: '$tiny',
+          size: '$9',
+          p: '$4',
+        }}
+      />
+      <Text variant="xs" css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>
+        {voter}
+      </Text>
+    </Flex>
+  ));
+};

package/src/Prebuilt/components/Polls/common/Votes.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Avatar, Box, Flex, Text, Tooltip } from '../../../../';
+import { VoterList } from './VoterList';
+
+// Shows number of votes, avatars of voters and list of voters on hover
+export const Votes = ({ voters }) => {
+  const hiddenVotersCount = voters.length > 2 ? voters.length - 2 : 0;
+
+  return (
+    <Flex align="center" css={{ gap: '$4' }}>
+      <Text variant="sm" css={{ color: '$on_surface_medium' }}>
+        {voters.length}&nbsp;
+        {voters.length && voters.length !== 1 ? 'votes' : 'votes'}
+      </Text>
+      <Tooltip
+        side="bottom"
+        align="start"
+        disabled={hiddenVotersCount === 0}
+        boxCss={{
+          backgroundColor: '$surface_brighter',
+          borderRadius: '$1',
+          p: '$4 $6',
+          top: '$2',
+          zIndex: '20',
+          minWidth: '$44',
+        }}
+        title={<VoterList voters={voters} />}
+      >
+        <Flex align="center">
+          {voters.length
+            ? voters.slice(0, 2).map((voter, index) => (
+                <Avatar
+                  name={voter}
+                  css={{
+                    position: 'relative',
+                    transform: 'unset',
+                    left: `${index * -1}px`,
+                    fontSize: '$tiny',
+                    size: '$9',
+                    p: '$4',
+                    zIndex: '5',
+                  }}
+                />
+              ))
+            : null}
+          {hiddenVotersCount ? (
+            <Box
+              css={{
+                backgroundColor: '$secondary_default',
+                borderRadius: '$round',
+                position: 'relative',
+                left: '-$2',
+                p: '$2 $3',
+              }}
+            >
+              <Text
+                variant="caption"
+                css={{
+                  fontWeight: '$semiBold',
+                  color: '$on_surface_high',
+                  fontSize: '$tiny',
+                }}
+              >
+                +{hiddenVotersCount}
+              </Text>
+            </Box>
+          ) : null}
+        </Flex>
+      </Tooltip>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Preview/PreviewForm.tsx

@@ -27,10 +27,11 @@ const PreviewForm = ({
     e.preventDefault();
   };
   const isMobile = useMedia(cssConfig.media.md);
-  const { isHLSRunning } = useRecordingStreaming();
+  const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
   const layout = useRoomLayout();
   const { join_form: joinForm = {} } = layout?.screens?.preview?.default?.elements || {};
-  const showGoLive = joinForm?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning;
+  const showGoLive =
+    joinForm?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning && !isRTMPRunning;
 
   return (
     <Form

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -1,5 +1,5 @@
-import React, { Fragment, Suspense, useCallback, useEffect, useState } from 'react';
-import { useMedia } from 'react-use';
+import React, { Fragment, Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+import { useMeasure, useMedia } from 'react-use';
 import {
   HMSRoomState,
   selectIsLocalVideoEnabled,
@@ -38,7 +38,7 @@ import { useAuthToken, useUISettings } from '../AppData/useUISettings';
 // @ts-ignore: No implicit Any
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 // @ts-ignore: No implicit Any
-import { getFormattedCount } from '../../common/utils';
+import { calculateAvatarAndAttribBoxSize, getFormattedCount } from '../../common/utils';
 // @ts-ignore: No implicit Any
 import { UI_SETTINGS } from '../../common/constants';
 
@@ -53,13 +53,24 @@ const getParticipantChipContent = (peerCount = 0) => {
   return `${formattedNum} other${parseInt(formattedNum) === 1 ? '' : 's'} in the session`;
 };
 
+const useLocalTileAspectRatio = () => {
+  const localPeer = useHMSStore(selectLocalPeer);
+  const videoTrack = useHMSStore(selectVideoTrackByID(localPeer?.videoTrack));
+  const isMobile = useMedia(cssConfig.media.md);
+  let aspectRatio = 0;
+  if (videoTrack?.width && videoTrack?.height) {
+    aspectRatio = videoTrack.width / videoTrack.height;
+  } else {
+    aspectRatio = isMobile ? 9 / 16 : 16 / 9;
+  }
+  return aspectRatio;
+};
+
 const PreviewJoin = ({
-  onJoin,
   skipPreview,
   initialName,
   asRole,
 }: {
-  onJoin: () => void;
   skipPreview?: boolean;
   initialName?: string;
   asRole?: string;
@@ -99,16 +110,11 @@ const PreviewJoin = ({
       name,
     });
     join();
-    onJoin && onJoin();
-  }, [join, name, setPreviewPreference, onJoin]);
+  }, [join, name, setPreviewPreference]);
   const roomLayout = useRoomLayout();
 
   const { preview_header: previewHeader = {} } = roomLayout?.screens?.preview?.default?.elements || {};
-  const localPeer = useHMSStore(selectLocalPeer);
-  const videoTrack = useHMSStore(selectVideoTrackByID(localPeer?.videoTrack));
-  const isMobile = useMedia(cssConfig.media.md);
-  const aspectRatio =
-    videoTrack?.width && videoTrack?.height ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
+  const aspectRatio = useLocalTileAspectRatio();
   useEffect(() => {
     if (authToken) {
       if (skipPreview) {
@@ -201,13 +207,16 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
   const trackSelector = selectVideoTrackByID(localPeer?.videoTrack);
   const track = useHMSStore(trackSelector);
   const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
-  const videoTrack = useHMSStore(selectVideoTrackByID(localPeer?.videoTrack));
-  const isMobile = useMedia(cssConfig.media.md);
-  const aspectRatio =
-    videoTrack?.width && videoTrack?.height ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
+  const aspectRatio = useLocalTileAspectRatio();
+  const [ref, { width: calculatedWidth, height: calculatedHeight }] = useMeasure<HTMLDivElement>();
+  const [avatarSize, attribBoxSize] = useMemo(
+    () => calculateAvatarAndAttribBoxSize(calculatedWidth, calculatedHeight),
+    [calculatedWidth, calculatedHeight],
+  );
 
   return (
     <StyledVideoTile.Container
+      ref={ref}
       css={{
         bg: '$surface_default',
         aspectRatio,
@@ -232,20 +241,19 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
 
           {!isVideoOn ? (
             <StyledVideoTile.AvatarContainer>
-              <Avatar name={name} data-testid="preview_avatar_tile" />
+              <Avatar name={name} data-testid="preview_avatar_tile" size={avatarSize} />
             </StyledVideoTile.AvatarContainer>
           ) : null}
         </>
-      ) : !error ? (
-        <FullPageProgress />
       ) : null}
+      {!localPeer && !error ? <FullPageProgress /> : null}
 
       {showMuteIcon ? (
-        <StyledVideoTile.AudioIndicator>
+        <StyledVideoTile.AudioIndicator size={attribBoxSize}>
           <MicOffIcon />
         </StyledVideoTile.AudioIndicator>
       ) : (
-        <StyledVideoTile.AudioIndicator size="medium">
+        <StyledVideoTile.AudioIndicator size={attribBoxSize}>
           <AudioLevel trackId={localPeer?.audioTrack} />
         </StyledVideoTile.AudioIndicator>
       )}

package/src/Prebuilt/components/Preview/{PreviewContainer.tsx → PreviewScreen.tsx}

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import { useSearchParam } from 'react-use';
 import { Flex } from '../../..';
 import { useHMSPrebuiltContext } from '../../AppContext';
@@ -14,25 +13,16 @@ import { useAuthToken } from '../AppData/useUISettings';
 // @ts-ignore: No implicit Any
 import { QUERY_PARAM_PREVIEW_AS_ROLE } from '../../common/constants';
 
-const PreviewContainer = () => {
-  const navigate = useNavigate();
+export const PreviewScreen = () => {
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const skipPreview = !isPreviewScreenEnabled;
   const previewAsRole = useSearchParam(QUERY_PARAM_PREVIEW_AS_ROLE);
   const { userName } = useHMSPrebuiltContext();
   const initialName = userName || (skipPreview ? 'Beam' : '');
-  const { roomId: urlRoomId, role: userRole } = useParams(); // from the url
   const authToken = useAuthToken();
   const roomLayout = useRoomLayout();
   const { preview_header: previewHeader = {} } = roomLayout?.screens?.preview?.default?.elements || {};
 
-  const onJoin = () => {
-    let meetingURL = `/meeting/${urlRoomId}`;
-    if (userRole) {
-      meetingURL += `/${userRole}`;
-    }
-    navigate(meetingURL);
-  };
   return (
     <Flex direction="column" css={{ size: '100%' }}>
       <Flex
@@ -41,12 +31,7 @@ const PreviewContainer = () => {
         align="center"
       >
         {authToken && Object.keys(previewHeader).length > 0 ? (
-          <PreviewJoin
-            initialName={initialName}
-            skipPreview={skipPreview}
-            asRole={previewAsRole ?? undefined}
-            onJoin={onJoin}
-          />
+          <PreviewJoin initialName={initialName} skipPreview={skipPreview} asRole={previewAsRole ?? undefined} />
         ) : (
           <FullPageProgress />
         )}
@@ -54,5 +39,3 @@ const PreviewContainer = () => {
     </Flex>
   );
 };
-
-export default PreviewContainer;

package/src/Prebuilt/components/RaiseHand.jsx

@@ -9,7 +9,7 @@ export const RaiseHand = () => {
   const { isHandRaised, toggleHandRaise } = useMyMetadata();
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
-      <IconButton active={!isHandRaised} onClick={async () => await toggleHandRaise()}>
+      <IconButton data-testid="hand_raise_btn" active={!isHandRaised} onClick={async () => await toggleHandRaise()}>
         <HandIcon />
       </IconButton>
     </Tooltip>

package/src/Prebuilt/components/RoleChangeModal.jsx

@@ -9,7 +9,6 @@ import { Box, Flex } from '../../Layout';
 import { Dialog } from '../../Modal';
 import { Text } from '../../Text';
 import { Tooltip } from '../../Tooltip';
-import { PrebuiltDialogPortal } from './PrebuiltDialogPortal';
 import { useDropdownSelection } from './hooks/useDropdownSelection';
 import { useFilteredRoles } from '../common/hooks';
 import { textEllipsis } from '../../utils';
@@ -48,7 +47,7 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => {
   const peerNameMaxWidth = 200;
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
           <Dialog.Title css={{ p: 0 }} asChild>
@@ -180,7 +179,7 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => {
             </Box>
           </Flex>
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { useMedia } from 'react-use';
 import { Box, Button, config as cssConfig, Dialog, Flex, Text } from '../../..';
 import { Sheet } from '../../../Sheet';
-import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 
 export const RequestPrompt = ({
   open = true,
@@ -35,7 +34,7 @@ export const RequestPrompt = ({
 
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content css={{ p: '$10' }}>
           <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md', justifyContent: 'center' }}>
@@ -44,7 +43,7 @@ export const RequestPrompt = ({
           <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
           <RequestActions actionText={actionText} onAction={onAction} />
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/Settings/SettingsModal.jsx

@@ -9,7 +9,6 @@ import { Sheet } from '../../../Sheet';
 import { Tabs } from '../../../Tabs';
 import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
-import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { settingContent, settingsList } from './common.js';
 
 const SettingsModal = ({ open, onOpenChange, screenType, children = <></> }) => {
@@ -187,7 +186,7 @@ const DesktopSettingModal = ({
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Trigger asChild>{children}</Dialog.Trigger>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -257,7 +256,7 @@ const DesktopSettingModal = ({
             </IconButton>
           </Dialog.Close>
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/Settings/StartRecording.jsx

@@ -2,13 +2,24 @@ import React, { useState } from 'react';
 import { selectPermissions, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { AlertTriangleIcon } from '@100mslive/react-icons';
 import { Button, Dialog, Flex, Text } from '../../../';
-import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { ResolutionInput } from '../Streaming/ResolutionInput';
-import { getResolution } from '../Streaming/RTMPStreaming';
 import { ToastManager } from '../Toast/ToastManager';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants';
 
+export function getResolution(recordingResolution) {
+  const resolution = {};
+  if (recordingResolution.width) {
+    resolution.width = recordingResolution.width;
+  }
+  if (recordingResolution.height) {
+    resolution.height = recordingResolution.height;
+  }
+  if (Object.keys(resolution).length > 0) {
+    return resolution;
+  }
+}
+
 const StartRecording = ({ open, onOpenChange }) => {
   const permissions = useHMSStore(selectPermissions);
   const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
@@ -22,7 +33,7 @@ const StartRecording = ({ open, onOpenChange }) => {
   if (isBrowserRecordingOn) {
     return (
       <Dialog.Root open={open} onOpenChange={onOpenChange}>
-        <PrebuiltDialogPortal>
+        <Dialog.Portal>
           <Dialog.Content
             css={{
               width: 'min(400px,80%)',
@@ -67,7 +78,7 @@ const StartRecording = ({ open, onOpenChange }) => {
               </Button>
             </Flex>
           </Dialog.Content>
-        </PrebuiltDialogPortal>
+        </Dialog.Portal>
       </Dialog.Root>
     );
   }

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
-import { ConferencingScreen } from '@100mslive/types-prebuilt';
+import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
 import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
 import { CrossIcon } from '@100mslive/react-icons';
 // @ts-ignore: No implicit Any
 import { Chat } from './Chat/Chat';
+import { PaginatedParticipants } from './Footer/PaginatedParticipants';
 // @ts-ignore: No implicit Any
 import { ParticipantList } from './Footer/ParticipantList';
-import { config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
+import { Box, config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
 import { Tooltip } from '../../Tooltip';
 // @ts-ignore: No implicit Any
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
@@ -46,6 +47,7 @@ export const SidePaneTabs = React.memo<{
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const resetSidePane = useSidepaneReset();
   const [activeTab, setActiveTab] = useState(active);
+  const [activeRole, setActiveRole] = useState('');
   const peerCount = useHMSStore(selectPeerCount);
   const { elements } = useRoomLayoutConferencingScreen();
   const showChat = !!elements?.chat;
@@ -53,6 +55,7 @@ export const SidePaneTabs = React.memo<{
   const hideTabs = !(showChat && showParticipants);
   const isMobile = useMedia(cssConfig.media.md);
   const isOverlayChat = !!elements?.chat?.is_overlay && isMobile;
+  const { off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
 
   useEffect(() => {
@@ -69,6 +72,25 @@ export const SidePaneTabs = React.memo<{
     setActiveTab(active);
   }, [active]);
 
+  if (activeRole) {
+    return (
+      <Flex
+        direction="column"
+        css={{
+          color: '$on_primary_high',
+          h: '100%',
+          marginTop: hideControls && isOverlayChat ? '$17' : '0',
+          transition: 'margin 0.3s ease-in-out',
+          position: 'relative',
+        }}
+      >
+        <Box css={{ position: 'absolute', left: 0, top: 0, size: '100%', zIndex: 21, bg: '$surface_dim' }}>
+          <PaginatedParticipants roleName={activeRole} onBack={() => setActiveRole('')} />
+        </Box>
+      </Flex>
+    );
+  }
+
   return (
     <Flex
       direction="column"
@@ -95,7 +117,11 @@ export const SidePaneTabs = React.memo<{
                 )}
               </Text>
 
-              {showChat ? <Chat screenType={screenType} /> : <ParticipantList />}
+              {showChat ? (
+                <Chat screenType={screenType} />
+              ) : (
+                <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />
+              )}
             </>
           ) : (
             <Tabs.Root
@@ -125,11 +151,11 @@ export const SidePaneTabs = React.memo<{
                     color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
                   }}
                 >
-                  Participants <ParticipantCount count={peerCount} />
+                  Participants &nbsp; <ParticipantCount count={peerCount} />
                 </Tabs.Trigger>
               </Tabs.List>
               <Tabs.Content value={SIDE_PANE_OPTIONS.PARTICIPANTS} css={{ p: 0 }}>
-                <ParticipantList />
+                <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />
               </Tabs.Content>
               <Tabs.Content value={SIDE_PANE_OPTIONS.CHAT} css={{ p: 0 }}>
                 <Chat screenType={screenType} />
@@ -141,7 +167,7 @@ export const SidePaneTabs = React.memo<{
 
       {isOverlayChat && isChatOpen ? null : (
         <IconButton
-          css={{ position: 'absolute', right: '$10', top: '$11', '@md': { top: '$8', right: '$8' } }}
+          css={{ position: 'absolute', right: '$9', top: '$11', '@md': { top: '$8', right: '$6' } }}
           onClick={e => {
             e.stopPropagation();
             if (activeTab === SIDE_PANE_OPTIONS.CHAT) {

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -15,7 +15,6 @@ import { Dialog } from '../../Modal';
 import { Switch } from '../../Switch';
 import { Text } from '../../Text';
 import { DialogDropdownTrigger } from '../primitives/DropdownTrigger';
-import { PrebuiltDialogPortal } from './PrebuiltDialogPortal';
 import { useSetUiSettings } from './AppData/useUISettings';
 import { useDropdownSelection } from './hooks/useDropdownSelection';
 import { UI_SETTINGS } from '../common/constants';
@@ -40,7 +39,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
 
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -119,7 +118,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
             <TrackStats trackID={selectedStat.id} layer={selectedStat.layer} local={selectedStat.local} />
           )}
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };