ICSHWI-7718: Add bottom-margin to all pages

src/components/deployments/DeploymentDetails.js

@@ -83,7 +83,7 @@ export function DeploymentDetails({ deployment, getDeployment, onDeploymentStart
       {alert && <Grid item xs={12}>
           {alert}
         </Grid>}
-      <Grid item xs={12} md={12}>
+      <Grid item xs={12} md={12} style={{paddingBottom: 0}}>
         { deployment.awxJobId ?
           <SimpleAccordion summary="Deployment Job Output" defaultExpanded>
             <DeploymentJobOutput awxJobId={deployment.awxJobId} update={updateOutput} />

src/views/IOC/IOCDetailsView.js

@@ -51,7 +51,7 @@ export function IOCDetailsView({ match }) {
                 </Tabs>
               </Grid>
             </Grid>
-            <Grid item xs={12}>
+            <Grid item xs={12} style={{paddingBottom: 0}}>
               {selectedTab === "Live Status" && <IOCLiveStatus ioc={ioc} />}
               {selectedTab === "Manage deployment" && <IOCManage ioc={ioc} getIOC={getIOC} />}
             </Grid>

src/views/deployments/DeploymentDetailsView.js

@@ -5,11 +5,19 @@ import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/Global
 import { useDeployment } from '../../api/SwaggerApi';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import { useHistory } from "react-router-dom";
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    marginBottom: theme.spacing(2),
+  },
+}));
 
 export function DeploymentDetailsView({ match }) {
   const id = parseInt(match.params.id);
   const [deployment, getDeployment] = useDeployment(id);
   const history = useHistory();
+  const classes = useStyles();
 
   useGlobalAppBar(
     "CCCE / Deployment Details"
@@ -23,7 +31,7 @@ export function DeploymentDetailsView({ match }) {
 
   return (
       <Container data-testid="deployment-details-container">
-        <Paper>
+        <Paper className={classes.root}>
           <IconButton color="inherit" onClick={handleClick}>
               <ArrowBackIcon />
           </IconButton>

src/views/help/HelpView.js

@@ -13,6 +13,7 @@ const useStyles = makeStyles((theme) => ({
   paper: {
     maxWidth: "80%",
     padding: theme.spacing(4),
+    marginBottom: theme.spacing(2),
   },
 }));