diff --git a/src/app/features/room/CallView.tsx b/src/app/features/room/CallView.tsx
index cbd304c6..d6539369 100644
--- a/src/app/features/room/CallView.tsx
+++ b/src/app/features/room/CallView.tsx
@@ -5,6 +5,7 @@ import { Box } from 'folds';
 import { RoomViewHeader } from './RoomViewHeader';
 import { useCallState } from '../../pages/client/CallProvider';
 import { RefContext } from '../../pages/call/PersistentCallContainer';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 
 function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
@@ -39,12 +40,15 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
   const iframeHostRef = useRef<HTMLDivElement>(null);
 
   const originalIframeStylesRef = useRef<OriginalStyles | null>(null);
-  const { activeCallRoomId, isPrimaryIframe } = useCallState();
+  const { activeCallRoomId, isPrimaryIframe, isChatOpen } = useCallState();
   const isViewingActiveCall = useMemo(
     () => activeCallRoomId !== null && activeCallRoomId === room.roomId,
     [activeCallRoomId]
   );
 
+  const screenSize = useScreenSizeContext();
+  const isMobile = screenSize === ScreenSize.Mobile;
+
   const activeIframeDisplayRef =
     !isPrimaryIframe || isViewingActiveCall ? iframeRef : backupIframeRef;
 
@@ -127,8 +131,8 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
     <Box
       direction="Column"
       style={{
-        width: '60%',
-        display: isCallViewVisible ? 'flex' : 'none',
+        width: isChatOpen ? (isMobile ? '50%' : '100%') : '100%',
+        display: isCallViewVisible ? (isMobile && isChatOpen ? 'none' : 'flex') : 'none',
       }}
     >
       <RoomViewHeader />