Fix MZ spacing problems (#191)

# What's Changed?

- Moved the fourth column of the Astro Pi control panel to underneath
- Increased the spacing between the roll, pitch and yaw values 

## Review app


https://staging-editor.raspberrypi.org/branches/issues_190-Fix_MZ_spacing_problems/web-component.html?sense_hat_always_enabled=t

## Screenshots

### Before

<img width="900" alt="Screenshot 2022-09-21 at 15 54 24"
src="https://user-images.githubusercontent.com/88904316/191538317-69592bf4-8042-4b49-8476-d56b5632af1b.png">

### After

<img width="897" alt="Screenshot 2022-09-21 at 15 55 52"
src="https://user-images.githubusercontent.com/88904316/191538493-14471508-965b-4c9a-a9e8-d8c8a7658fa0.png">

## What's not changed?

- Making the web component responsive (would need to be relative to the
width of its container on the host page rather than purely the page
width, maybe using container queries?)

closes #190

Co-authored-by: loiswells97 <loiswells97@users.noreply.github.com>
Co-authored-by: Lois Wells <lois.wells@raspberrypi.org>
Co-authored-by: Patrick Cherry <patch0@users.noreply.github.com>
Co-authored-by: Lois Wells <88904316+loiswells97@users.noreply.github.com>

Author: 3 people

CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Changed
 
+- Layout and spacing in the Mission Zero Control Panel so web component fits in a narrower container (#191)
 - Updated modal styling (#193)
 
 ## [0.4.0]

src/components/AstroPiModel/AstroPiControls/AstroPiControls.js

@@ -13,12 +13,14 @@ const AstroPiControls = (props) => {
     <div className='sense-hat-controls'>
       <h2 className='sense-hat-controls-heading'>Space Station Control Panel</h2>
       <div className="sense-hat-controls-panel">
+        <div className='sense-hat-controls-panel__sliders'>
           <SliderInput name="temperature" unit="°C" min={-40} max={120} defaultValue={temperature} Icon={TemperatureIcon} />
           <SliderInput name="pressure" unit="hPa" min={260} max={1260} defaultValue={pressure} Icon={PressureIcon}/>
           <SliderInput name="humidity" unit="%" min={0} max={100} defaultValue={humidity} Icon={HumidityIcon}/>
+        </div>
 
-        <div className="sense-hat-controls-panel__control">
-          <Input name="colour" label="Colour Picker" type="color" defaultValue={colour} />
+        <div className="sense-hat-controls-panel__control sense-hat-controls-panel__control-last">
+          <Input name="colour" label="Colour" type="color" defaultValue={colour} />
           <MotionInput defaultValue={motion} />
           <Stopwatch />
         </div>

src/components/AstroPiModel/AstroPiModel.scss

@@ -30,16 +30,16 @@
       }
 
       &__values {
-        flex: 8;
+        flex: 10;
         display: flex;
-        margin: 0 var(--spacing-6);
+        margin: 0 var(--spacing-1);
       }
 
       &__reading {
         flex: 1;
         text-transform: uppercase;
         font-weight: var(--font-weight-bold);
-        margin: 0 var(--spacing-2);
+        margin: 0 var(--spacing-1);
         font-size: var(--font-size-d-1);
       }
 
@@ -74,7 +74,7 @@
     &-panel {
       flex: 1;
       display: flex;
-      justify-content: space-between;
+      flex-flow: column;
 
       &__control {
         display: flex;
@@ -85,7 +85,7 @@
         padding-top: var(--spacing-half);
         box-sizing: border-box;
         border-radius: 5px;
-        width: 24%;
+        width: 32%;
         justify-content: space-between;
 
         &-reading {
@@ -110,7 +110,7 @@
         &-toggle {
           border-radius: 5px;
           width: 100%;
-          padding: var(--spacing-half);
+          flex: 1;
           box-sizing: border-box;
           display: flex;
           align-items: center;
@@ -123,12 +123,15 @@
 
         &-input {
           cursor: pointer;
-          width: 115px;
+          width: 85px;
           transform: rotate(270deg);
         }
 
         input[type='color'] {
           border-radius: 5px;
+          flex: 1;
+          width: 100%;
+          padding: var(--spacing-half) var(--spacing-2);
         }
 
         &-name {
@@ -140,13 +143,29 @@
         &-value {
           margin-left: var(--spacing-half);
         }
+
+        &-last {
+          margin-top: var(--spacing-1);
+          flex-flow: row;
+          width: 100%;
+          align-items: inherit;
+          justify-content: space-between;
+        }
+      }
+
+      &__sliders {
+        display: flex;
+        justify-content: space-between;
+        .sense-hat-controls-panel__control {
+          min-height: 175px;
+        }
       }
 
       &__container {
         display: flex;
         flex-flow: column;
         align-items: center;
-        width: 100%;
+        width: 32%;
 
         .sense-hat-controls-panel__control-name, input {
           cursor: pointer;