fix: solve the accordion issue on mobile (#114)

graasp · Dec 19, 2024 · 351b1a4 · 351b1a4
1 parent e94c3f0
commit 351b1a4
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/src/modules/Root.tsx b/src/modules/Root.tsx
@@ -61,7 +61,7 @@ const theme = createTheme({
 
 const RootDiv = styled('div')({
   flexGrow: 1,
-  height: '100vh',
+  minHeight: '100vh',
   background: '#fafaff',
 });
 

diff --git a/src/modules/common/SimulationControl.tsx b/src/modules/common/SimulationControl.tsx
@@ -23,7 +23,7 @@ export const SimulationControl = (): JSX.Element => {
   };
 
   return (
-    <Stack mt={2} alignItems="center" spacing={2}>
+    <Stack mt={2} mb={2} alignItems="center" spacing={2}>
       <Stack alignItems="end">
         <SpeedButton />
         <LabelledSlider

diff --git a/src/modules/main/PlayerView.tsx b/src/modules/main/PlayerView.tsx
@@ -18,7 +18,13 @@ const PlayerViewComponent = (): JSX.Element => {
 
   if (status === SimulationStatus.INITIAL_LOADING) {
     return (
-      <Stack width="100%" height="100%" justifyContent="center" spacing={1}>
+      <Stack
+        width="100%"
+        height="100vh"
+        p={2}
+        justifyContent="center"
+        spacing={1}
+      >
         <Stack alignItems="center">
           <Typography variant="h4">{t('LOADING_MESSAGE')}</Typography>
         </Stack>
@@ -29,8 +35,6 @@ const PlayerViewComponent = (): JSX.Element => {
 
   return (
     <Stack
-      sx={{ background: '#fafaff' }}
-      height="100%"
       direction={{ xs: 'column-reverse', md: 'row' }}
       justifyContent="center"
     >