Merge pull request #122 from alan-turing-institute/feature/layout-fixes

fix some low-hanging layout fruit
alan-turing-institute · May 16, 2022 · 8b829d9 · 8b829d9
2 parents 8d7f0cb + cfed949
commit 8b829d9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/frontend/src/components/CaseContainer.js b/frontend/src/components/CaseContainer.js
@@ -440,7 +440,7 @@ class CaseContainer extends Component {
       );
     } else {
       return (
-        <span>
+        <Box>
           <p>
             <Text color="#ff0000">
               Someone else is currently editing this case.
@@ -454,7 +454,7 @@ class CaseContainer extends Component {
               onClick={this.enableEditing.bind(this)}
             />
           </p>
-        </span>
+        </Box>
       );
     }
   }
@@ -478,7 +478,7 @@ class CaseContainer extends Component {
             areas={[
               { name: "header", start: [0, 0], end: [1, 0] },
               { name: "main", start: [0, 1], end: [1, 1] },
-              { name: "topright", start: [1, 0], end: [1, 0] },
+              { name: "right", start: [1, 0], end: [1, 1] },
             ]}
           >
             {this.state.showViewLayer &&
@@ -520,11 +520,10 @@ class CaseContainer extends Component {
                 }
                 editMode={this.inEditMode()}
               />
-              {this.getEditableControls()}
             </Box>
 
             <Box
-              gridArea="topright"
+              gridArea="right"
               direction="column"
               gap="small"
               pad={{
@@ -533,6 +532,7 @@ class CaseContainer extends Component {
                 bottom: "none",
               }}
             >
+              {this.getEditableControls()}
               {this.inEditMode() && (
                 <Button
                   label="Delete Case"
@@ -595,7 +595,7 @@ class CaseContainer extends Component {
                       className="tools"
                       gap="xxsmall"
                       direction="row"
-                      justify="end"
+                      justify="start"
                     >
                       <Button
                         secondary

diff --git a/frontend/src/components/Home.js b/frontend/src/components/Home.js
@@ -87,6 +87,7 @@ class Home extends React.Component {
             <img
               src="https://i.imgur.com/eHFzRO6.png"
               alt="Ethical Assurance flowchart"
+              height="100%"
             />
           </Box>
         </Grid>