Move toasts in calls up and fix click to dismiss

stylesheets/components/ToastManager.scss

@@ -43,3 +43,7 @@
   // Roughly size of composer + a bit of padding
   bottom: 40px;
 }
+
+.ToastManager--full-screen-call {
+  bottom: calc($CallControls__height + 32px);
+}

ts/components/CallingLobby.tsx

@@ -265,7 +265,16 @@ export function CallingLobby({
   useWasInitiallyMutedToast(hasLocalAudio, i18n);
 
   return (
-    <FocusTrap>
+    <FocusTrap
+      focusTrapOptions={{
+        allowOutsideClick: ({ target }) => {
+          if (!target || !(target instanceof HTMLElement)) {
+            return false;
+          }
+          return target.matches('.Toast, .Toast *');
+        },
+      }}
+    >
       <div className="module-calling__container dark-theme">
         {shouldShowLocalVideo ? (
           <video

ts/components/DebugLogWindow.tsx

@@ -157,6 +157,7 @@ export function DebugLogWindow({
           openFileInFolder={shouldNeverBeCalled}
           toast={toast}
           containerWidthBreakpoint={null}
+          isInFullScreenCall={false}
         />
       </div>
     );
@@ -213,6 +214,7 @@ export function DebugLogWindow({
         openFileInFolder={shouldNeverBeCalled}
         toast={toast}
         containerWidthBreakpoint={null}
+        isInFullScreenCall={false}
       />
     </div>
   );

ts/components/LeftPane.stories.tsx

@@ -264,6 +264,7 @@ const useProps = (overrideProps: OverridePropsType = {}): PropsType => {
         toast={undefined}
         megaphone={undefined}
         containerWidthBreakpoint={containerWidthBreakpoint}
+        isInFullScreenCall={false}
       />
     ),
     selectedConversationId: undefined,

ts/components/Preferences.tsx

@@ -1656,6 +1656,7 @@ export function Preferences({
         openFileInFolder={shouldNeverBeCalled}
         toast={toast}
         containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        isInFullScreenCall={false}
       />
     </>
   );

ts/components/ToastManager.stories.tsx

@@ -222,6 +222,7 @@ export default {
     toastType: ToastType.AddingUserToGroup,
     megaphoneType: MegaphoneType.UsernameOnboarding,
     OS: 'macOS',
+    isInFullScreenCall: false,
   },
 } satisfies Meta<Args>;
 

ts/components/ToastManager.tsx

@@ -29,6 +29,7 @@ export type PropsType = {
   centerToast?: boolean;
   containerWidthBreakpoint: WidthBreakpoint | null;
   isCompositionAreaVisible?: boolean;
+  isInFullScreenCall: boolean;
 };
 
 const SHORT_TIMEOUT = 3 * SECOND;
@@ -554,8 +555,12 @@ export function renderMegaphone({
 }
 
 export function ToastManager(props: PropsType): JSX.Element {
-  const { centerToast, containerWidthBreakpoint, isCompositionAreaVisible } =
-    props;
+  const {
+    centerToast,
+    containerWidthBreakpoint,
+    isCompositionAreaVisible,
+    isInFullScreenCall,
+  } = props;
 
   const toast = renderToast(props);
 
@@ -569,7 +574,13 @@ export function ToastManager(props: PropsType): JSX.Element {
     >
       {centerToast
         ? createPortal(
-            <div className="ToastManager__root">{toast}</div>,
+            <div
+              className={classNames('ToastManager__root', {
+                'ToastManager--full-screen-call': isInFullScreenCall,
+              })}
+            >
+              {toast}
+            </div>,
             document.body
           )
         : toast}

ts/state/smart/ToastManager.tsx

@@ -96,6 +96,7 @@ export const SmartToastManager = memo(function SmartToastManager({
       centerToast={centerToast}
       containerWidthBreakpoint={containerWidthBreakpoint}
       isCompositionAreaVisible={isCompositionAreaVisible}
+      isInFullScreenCall={isInFullScreenCall}
     />
   );
 });