From d50539de7799ed4abfc862bea2481adf70aca9b5 Mon Sep 17 00:00:00 2001
From: Thibault Reidy <147397675+ReidyT@users.noreply.github.com>
Date: Fri, 29 Nov 2024 11:30:55 +0100
Subject: [PATCH] feat: improve the responsiveness of the app (#62)

---
 src/modules/Root.tsx              |  3 ++-
 src/modules/models/Garden.tsx     |  4 +++-
 src/modules/scenes/FirstScene.tsx | 12 ++++++++----
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/modules/Root.tsx b/src/modules/Root.tsx
index b79bbbd..ce3541a 100644
--- 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
index 3763938..abeec72 100644
--- 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
index c4ec6f1..217be77 100644
--- 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 */}