updated some styling on the device component page

src/common/SmartBreadcrumb.tsx

@@ -342,6 +342,7 @@ export default function SmartBreadcrumb(props: Props) {
 
   return (
     <Box 
+      display="flex"
       padding={props.padding}
       paddingLeft={props.paddingLeft}
       paddingRight={props.paddingRight}

src/pages/DeviceComponent.tsx

@@ -619,6 +619,7 @@ export default function DeviceComponent() {
         direction="row"
         justifyContent="flex-start"
         alignContent="center"
+        rowSpacing={1}
         className={classes.toolbar}>
         <Grid
           size={{ xs: 8, sm: 9 }}
@@ -649,6 +650,9 @@ export default function DeviceComponent() {
             deviceComponentPreferences={deviceComponentPrefs}
           />
         </Grid>
+        <Grid size={{ xs: 12 }}>
+          {status()}
+        </Grid>
       </Grid>
 
       <Grid
@@ -657,9 +661,7 @@ export default function DeviceComponent() {
         justifyContent="flex-start"
         alignItems="center"
         className={classes.contentContainer}>
-        <Grid container size={{ xs: 12 }} justifyContent="flex-end">
-          {status()}
-        </Grid>
+
         <Grid container size={{ xs: 12 }}>
           {
             <Grid size={{ xs: 12 }} className={classes.verticalSpacing}>