feat: improve the responsiveness of the app (#62)

graasp · Nov 29, 2024 · d50539d · d50539d
1 parent ff828b0
commit d50539d
Show file tree

Hide file tree

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

diff --git a/src/modules/models/Garden.tsx b/src/modules/models/Garden.tsx
@@ -13,7 +13,8 @@ const COLORS_BY_SEASON = {
 };
 
 const SIZE_IN_METERS = 16;
-const HEIGHT_IN_METERS = 0.8;
+const HEIGHT_IN_METERS = 1;
+const RADIUS_IN_METERS = 0.3;
 
 type Props = {
   position: Vector3;
@@ -30,6 +31,7 @@ export const Garden = ({ position }: Props): JSX.Element => {
       scale={[SIZE_IN_METERS, HEIGHT_IN_METERS, SIZE_IN_METERS]}
       position={position}
       material={material}
+      radius={RADIUS_IN_METERS}
     />
   );
 };
diff --git a/src/modules/scenes/FirstScene.tsx b/src/modules/scenes/FirstScene.tsx
@@ -23,15 +23,19 @@ const FirstSceneComponent = (): JSX.Element => {
   const { startSimulation, status } = useSimulation();
 
   return (
-    <Stack sx={{ background: '#fafaff' }} height="100vh" direction="row">
-      <Stack alignItems="center" flexGrow={4}>
+    <Stack
+      sx={{ background: '#fafaff' }}
+      height="100%"
+      direction={{ xs: 'column-reverse', md: 'row' }}
+      justifyContent="center"
+    >
+      <Stack justifyContent="center" alignItems="center" flexGrow={4}>
         <SimulationInformations />
 
         <Canvas
-          style={{ height: '400px' }}
+          style={{ height: '370px', width: '375px' }}
           camera={{ position: [10, 1, -15], fov: 60 }}
         >
-          <color attach="background" args={[0xfafaff]} />
           {/* Ambient Light for overall illumination */}
           <ambientLight intensity={1.5} />
           {/* Main Sunlight Simulation */}