Make step content scrollable overflow adjust results step

- Results step is now the last step but doesn't restrict the user from going back

frontend/src/assets/styles/step.scss

@@ -1,10 +1,17 @@
 .step-container {
     flex-grow: 1;
+    overflow: auto;
 }
 
 .step-overlay {
     background-color: #191919c2;
-    height: 100%;
+    min-height: 100%;
     padding-left: 3vw;
     padding-right: 3vw;
+    display: flex;
+    flex-direction: column;
+}
+
+.step-overlay .row {
+    flex-grow: 1;
 }

frontend/src/components/Stepper.js

@@ -11,7 +11,7 @@ import HabitatStep from './steps/habitat/HabitatStep';
 import ZoneStep from './steps/zone/ZoneStep';
 import ProjectSpecificsStep from './steps/specifics/ProjectSpecificsStep';
 import SummaryStep from './steps/summary/ZoneStep';
-import ResultsStep from './steps/Results'
+import ResultsStep from './steps/results/ResultsStep'
 
 const steps = [
   { 'label': 'Select location', 'component': LocationStep },
@@ -19,7 +19,8 @@ const steps = [
   { 'label': 'Choose habitat', 'component': HabitatStep },
   { 'label': 'Select zone', 'component': ZoneStep },
   { 'label': 'Project specifics', 'component': ProjectSpecificsStep },
-    {'label': 'Summary', 'component': SummaryStep }
+  { 'label': 'Summary', 'component': SummaryStep },
+  { 'label': 'Results', 'component': ResultsStep }
 ];
 
 export default function StepperWizard(props) {
@@ -44,9 +45,9 @@ export default function StepperWizard(props) {
   let CurrentStep = activeStep >= steps.length ? steps[steps.length - 1].component : steps[activeStep].component;
 
   return (
-    <Box sx={{ width: '100%', height: '100%', display: "flex", flexDirection: "column"}}>
+    <Box sx={{ width: '100%', height: '100%', display: "flex", flexDirection: "column", overflow: "hidden" }}>
       <Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw', marginBottom: '2vw' }}>
-        {steps.map((step, index) => {
+        {steps.map((step) => {
           return (
             <Step key={step.label}>
               <StepLabel>{step.label}</StepLabel>
@@ -54,15 +55,6 @@ export default function StepperWizard(props) {
           );
         })}
       </Stepper>
-      {activeStep === steps.length ? (
-        <React.Fragment sx={{ flexGrow: 1 }}>
-          <ResultsStep {...props} />
-          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
-            <Box sx={{ flex: '1 1 auto' }} />
-            <Button onClick={handleReset}>Reset</Button>
-          </Box>
-        </React.Fragment>
-      ) : (
       <React.Fragment>
         <CurrentStep {...props} setNextDisabled={setNextDisabled} />
         <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
@@ -75,12 +67,10 @@ export default function StepperWizard(props) {
             Back
           </Button>
           <Box sx={{ flex: '1 1 auto' }} />
-            <Button onClick={handleNext} disabled={nextDisabled}>
+          {activeStep === steps.length - 1 ?
-              {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
+            <Button onClick={handleReset}>Reset</Button> : <Button onClick={handleNext} disabled={nextDisabled}>Next</Button>}
-            </Button>
         </Box>
       </React.Fragment>
-      )}
     </Box>
   );
 }

frontend/src/components/steps/Results.js

@@ -1,19 +0,0 @@
-import Step from './Step';
-import { ListGroup, ListGroupItem } from 'reactstrap';
-
-export default function Results(props) {
-    const stepContent = (
-        <div>
-        <h5 className="pt-4">Plant List</h5>
-        <ListGroup>
-            {props.plants.map(function (plant, i) {
-                return <ListGroupItem key={i} >{plant.name}</ListGroupItem>;
-            })}
-        </ListGroup>
-        </div>
-    )
-
-    return (
-        <Step contentComponent={stepContent} />
-    )
-}

frontend/src/components/steps/results/ResultsStep.js

@@ -0,0 +1,21 @@
+import Step from '../Step';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+export default function ResultsStep(props) {
+    const stepContent = (
+        <div>
+        <h5 className="pt-4">Plant List</h5>
+            <div>
+            <ListGroup>
+                {props.plants.map(function (plant, i) {
+                    return <ListGroupItem key={i} >{plant.name}</ListGroupItem>;
+                })}
+            </ListGroup>
+            </div>
+        </div>
+    )
+
+    return (
+        <Step contentComponent={stepContent} />
+    )
+}