Improve call interface UI
Fix call interface taking the whole screen and making the buttons behind
it unusable
GitLab: #155
Change-Id: I88a5bbbd543064e7c0221fffc9b061197f7c7c6d
diff --git a/client/src/pages/Messenger.tsx b/client/src/pages/Messenger.tsx
index e711608..9b28a28 100644
--- a/client/src/pages/Messenger.tsx
+++ b/client/src/pages/Messenger.tsx
@@ -15,7 +15,7 @@
* License along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*/
-import { Stack } from '@mui/material';
+import { Box, Stack } from '@mui/material';
import { Contact, Conversation, WebSocketMessageType } from 'jami-web-common';
import { useContext, useEffect, useState } from 'react';
import { Outlet } from 'react-router-dom';
@@ -91,7 +91,7 @@
}, [accountId, searchQuery, axiosInstance]);
return (
- <Stack direction="row" height="100vh" width="100vw">
+ <Box display="flex" height="100%">
<Stack flexGrow={0} flexShrink={0} overflow="auto">
<Header />
<NewContactForm onChange={setSearchQuery} />
@@ -104,10 +104,10 @@
</div>
)}
</Stack>
- <Stack flexGrow={1}>
+ <Box flexGrow={1} display="flex" position="relative">
<Outlet />
- </Stack>
- </Stack>
+ </Box>
+ </Box>
);
};