Fix width on mobile phones

Author: rvsia

packages/react-renderer-demo/src/app/src/components/layout.js

@@ -31,15 +31,14 @@ export const drawerWidth = 240;
 const useStyles = makeStyles((theme) => ({
   mainGradient: {
     backgroundImage: 'linear-gradient(135deg, #41108E 0%, rgba(165, 37, 193, 1) 44.76%, #FC9957 100%)',
-    backgroundSize: '100vw 100vh',
+    backgroundSize: '100% 100vh',
     backgroundRepeat: 'no-repeat',
     transition: theme.transitions.create(['margin', 'width'], {
       easing: theme.transitions.easing.easeOut,
       duration: theme.transitions.duration.enteringScreen
     })
   },
   mainGradientShift: {
-    width: `calc(100vw - ${drawerWidth}px)`,
     transition: theme.transitions.create(['margin', 'width'], {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen
@@ -101,7 +100,7 @@ const useStyles = makeStyles((theme) => ({
     right: 0,
     width: '100%',
     backgroundImage: 'linear-gradient(135deg, #41108E 0%, rgba(165, 37, 193, 1) 44.76%, #FC9957 100%)',
-    backgroundSize: '100vw 100vh',
+    backgroundSize: '100% 100vh',
     backgroundRepeat: 'no-repeat',
     zIndex: 900
   },