adjust room header for calling

src/app/features/room/Room.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import React, { useCallback } from 'react';
 import { Box, Line } from 'folds';
 import { useParams } from 'react-router-dom';
@@ -15,6 +16,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
 import { CallView } from '../call/CallView';
 import { useCallState } from '../../pages/client/call/CallProvider';
+import { RoomViewHeader } from './RoomViewHeader';
 
 export function Room() {
   const { eventId } = useParams();
@@ -42,6 +44,16 @@ export function Room() {
 
   return (
     <PowerLevelsContextProvider value={powerLevels}>
+      <Box
+        grow="Yes"
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {room.isCallRoom() && <RoomViewHeader />}
         <Box
           grow="Yes"
           style={{
@@ -51,7 +63,7 @@ export function Room() {
             flexDirection: 'row',
           }}
         >
-        <CallView room={room} eventId={eventId} />
+          <CallView room={room} />
           {(!room.isCallRoom() || isChatOpen) && (
             <Box
               grow="Yes"
@@ -74,6 +86,7 @@ export function Room() {
             </>
           )}
         </Box>
+      </Box>
     </PowerLevelsContextProvider>
   );
 }