F #5422: Remove redundant container tags (#1982)

2025-03-23 22:50:09 +03:00 · 2022-05-11 12:49:47 +02:00 · 2022-05-11 12:49:47 +02:00 · eb531e31b5
commit eb531e31b5
parent f5efac3ffe
41 changed files with 677 additions and 885 deletions
--- a/src/fireedge/src/client/components/HOC/InternalLayout/index.js
+++ b/src/fireedge/src/client/components/HOC/InternalLayout/index.js
@ -81,11 +81,7 @@ const InternalLayout = ({ title, disableLayout, children }) => {
          timeout={300}
          unmountOnExit
        >
-          <Container
-            ref={container}
-            maxWidth={false}
-            className={classes.scrollable}
-          >
+          <Container ref={container} className={classes.scrollable}>
            {children}
          </Container>
        </CSSTransition>
--- a/src/fireedge/src/client/components/HOC/InternalLayout/styles.js
+++ b/src/fireedge/src/client/components/HOC/InternalLayout/styles.js
@ -43,9 +43,6 @@ export default makeStyles((theme) => ({
  scrollable: {
    paddingTop: theme.spacing(2),
    paddingBottom: theme.spacing(2),
-    [theme.breakpoints.up('xs')]: {
-      padding: 0,
-    },
    height: '100%',
    overflow: 'auto',
    '&::-webkit-scrollbar': {
--- a/src/fireedge/src/client/components/Tables/styles.js
+++ b/src/fireedge/src/client/components/Tables/styles.js
@ -26,7 +26,6 @@ export const rowStyles = makeStyles(
      borderRadius: 6,
      display: 'flex',
      gap: 8,
-      boxShadow: shadows[1],
      [breakpoints.down('md')]: {
        flexWrap: 'wrap',
      },
--- a/src/fireedge/src/client/components/Tabs/Host/Vms.js
+++ b/src/fireedge/src/client/components/Tabs/Host/Vms.js
@ -15,7 +15,6 @@
 * ------------------------------------------------------------------------- */
 import { ReactElement } from 'react'
 import PropTypes from 'prop-types'
-import { Container, Stack } from '@mui/material'
 import { useHistory, generatePath } from 'react-router-dom'

 import { PATH } from 'client/apps/sunstone/routesOne'
@ -41,14 +40,12 @@ const VmsInfoTab = ({ id }) => {
  }

  return (
-    <Stack height={1} py={2} overflow="auto" component={Container}>
-      <VmsTable
-        disableRowSelect
-        disableGlobalSort
-        host={host}
-        onRowClick={(row) => handleRowClick(row.ID)}
-      />
-    </Stack>
+    <VmsTable
+      disableRowSelect
+      disableGlobalSort
+      host={host}
+      onRowClick={(row) => handleRowClick(row.ID)}
+    />
  )
 }

--- a/src/fireedge/src/client/components/Tabs/Vm/Capacity/information.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/Capacity/information.js
@ -15,14 +15,14 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import PropTypes from 'prop-types'
-import { Paper, Typography } from '@mui/material'
+import { Typography } from '@mui/material'

 import ButtonToTriggerForm from 'client/components/Forms/ButtonToTriggerForm'
 import { ResizeCapacityForm } from 'client/components/Forms/Vm'
 import { Tr } from 'client/components/HOC'
 import useCapacityTabStyles from 'client/components/Tabs/Vm/Capacity/styles'

-import * as VirtualMachine from 'client/models/VirtualMachine'
+import { isVCenter } from 'client/models/VirtualMachine'
 import { prettyBytes } from 'client/utils'
 import { T, VM_ACTIONS } from 'client/constants'

@ -30,8 +30,6 @@ const InformationPanel = ({ actions, vm = {}, handleResizeCapacity }) => {
  const classes = useCapacityTabStyles()
  const { TEMPLATE } = vm

-  const isVCenter = VirtualMachine.isVCenter(vm)
-
  const capacity = [
    {
      name: T.PhysicalCpu,
@ -43,7 +41,7 @@ const InformationPanel = ({ actions, vm = {}, handleResizeCapacity }) => {
      value: TEMPLATE?.VCPU ?? '-',
      dataCy: 'virtualcpu',
    },
-    isVCenter && {
+    isVCenter(vm) && {
      name: T.VirtualCores,
      value: (
        <>
@ -71,7 +69,7 @@ const InformationPanel = ({ actions, vm = {}, handleResizeCapacity }) => {
  ].filter(Boolean)

  return (
-    <Paper variant="outlined" className={classes.root}>
+    <div className={classes.root}>
      <div className={classes.actions}>
        {actions?.includes?.(VM_ACTIONS.RESIZE_CAPACITY) && (
          <ButtonToTriggerForm
@ -93,7 +91,7 @@ const InformationPanel = ({ actions, vm = {}, handleResizeCapacity }) => {
      </div>
      {capacity.map(({ name, value, dataCy }) => (
        <div key={name} className={classes.item}>
-          <Typography className={classes.title} noWrap title={name}>
+          <Typography fontWeight="medium" noWrap title={name}>
            {name}
          </Typography>
          <Typography variant="body2" noWrap title={value} data-cy={dataCy}>
@ -101,7 +99,7 @@ const InformationPanel = ({ actions, vm = {}, handleResizeCapacity }) => {
          </Typography>
        </div>
      ))}
-    </Paper>
+    </div>
  )
 }

--- a/src/fireedge/src/client/components/Tabs/Vm/Capacity/styles.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/Capacity/styles.js
@ -17,8 +17,7 @@ import makeStyles from '@mui/styles/makeStyles'

 export default makeStyles((theme) => ({
  root: {
-    marginBlock: '0.8em',
-    padding: '1em',
+    padding: '0.5em',
    display: 'grid',
    gap: '1em',
    gridAutoFlow: 'column',
@ -38,14 +37,11 @@ export default makeStyles((theme) => ({
  actions: {
    [theme.breakpoints.down('md')]: {
      borderBottom: `1px solid ${theme.palette.divider}`,
-      padding: '1em',
+      padding: '0 1em 1em 1em',
    },
    [theme.breakpoints.up('md')]: {
      order: 1,
      textAlign: 'end',
    },
  },
-  title: {
-    fontWeight: theme.typography.fontWeightMedium,
-  },
 }))
--- a/src/fireedge/src/client/containers/ApplicationsInstances/index.js
+++ b/src/fireedge/src/client/containers/ApplicationsInstances/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useState } from 'react'
-import { Container, Box } from '@mui/material'
+import { Box } from '@mui/material'

 import { useGetServicesQuery } from 'client/features/OneApi/service'
 import DialogInfo from 'client/containers/ApplicationsInstances/DialogInfo'
@ -35,7 +35,7 @@ function ApplicationsInstances() {
  } = useGetServicesQuery()

  return (
-    <Container disableGutters>
+    <>
      <ListHeader
        title={T.ApplicationsInstances}
        hasReloadButton
@ -65,7 +65,7 @@ function ApplicationsInstances() {
          handleClose={() => setShowDialog(false)}
        />
      )}
-    </Container>
+    </>
  )
 }

--- a/src/fireedge/src/client/containers/ApplicationsTemplates/index.js
+++ b/src/fireedge/src/client/containers/ApplicationsTemplates/index.js
@ -16,7 +16,7 @@
 /* eslint-disable jsdoc/require-jsdoc */
 import { useState } from 'react'
 import { useHistory, generatePath } from 'react-router-dom'
-import { Container, Box } from '@mui/material'
+import { Box } from '@mui/material'

 import { PATH } from 'client/apps/sunstone/routesFlow'
 import { useGetServiceTemplatesQuery } from 'client/features/OneApi/serviceTemplate'
@ -38,7 +38,7 @@ function ApplicationsTemplates() {
  } = useGetServiceTemplatesQuery()

  return (
-    <Container disableGutters>
+    <>
      <ListHeader
        title={T.ApplicationsTemplates}
        hasReloadButton
@ -79,7 +79,7 @@ function ApplicationsTemplates() {
          handleCancel={() => setShowDialog(false)}
        />
      )}
-    </Container>
+    </>
  )
 }

--- a/src/fireedge/src/client/containers/Clusters/Detail.js
+++ b/src/fireedge/src/client/containers/Clusters/Detail.js
@ -15,7 +15,6 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useParams, Redirect } from 'react-router-dom'
-import { Container, Box } from '@mui/material'

 import ClusterTabs from 'client/components/Tabs/Cluster'

@ -26,17 +25,7 @@ function ClusterDetail() {
    return <Redirect to="/" />
  }

-  return (
-    <Box
-      py={2}
-      overflow="auto"
-      display="flex"
-      flexDirection="column"
-      component={Container}
-    >
-      {<ClusterTabs id={id} />}
-    </Box>
-  )
+  return <ClusterTabs id={id} />
 }

 export default ClusterDetail
--- a/src/fireedge/src/client/containers/Clusters/index.js
+++ b/src/fireedge/src/client/containers/Clusters/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useState } from 'react'
-import { Container, Stack, Chip } from '@mui/material'
+import { Stack, Chip } from '@mui/material'

 import { ClustersTable } from 'client/components/Tables'
 import ClusterTabs from 'client/components/Tabs/Cluster'
@ -26,40 +26,33 @@ function Clusters() {
  const [selectedRows, onSelectedRowsChange] = useState(() => [])

  return (
-    <Stack height={1} py={2} overflow="auto" component={Container}>
-      <SplitPane>
-        <ClustersTable onSelectedRowsChange={onSelectedRowsChange} />
+    <SplitPane>
+      <ClustersTable onSelectedRowsChange={onSelectedRowsChange} />

-        {selectedRows?.length > 0 && (
-          <Stack overflow="auto">
-            {selectedRows?.length === 1 ? (
-              <ClusterTabs id={selectedRows[0]?.values.ID} />
-            ) : (
-              <Stack
-                direction="row"
-                flexWrap="wrap"
-                gap={1}
-                alignItems="center"
-              >
-                <MultipleTags
-                  limitTags={10}
-                  tags={selectedRows?.map(
-                    ({ original, id, toggleRowSelected }) => (
-                      <Chip
-                        key={id}
-                        variant="text"
-                        label={original?.NAME ?? id}
-                        onDelete={() => toggleRowSelected(false)}
-                      />
-                    )
-                  )}
-                />
-              </Stack>
-            )}
-          </Stack>
-        )}
-      </SplitPane>
-    </Stack>
+      {selectedRows?.length > 0 && (
+        <Stack overflow="auto">
+          {selectedRows?.length === 1 ? (
+            <ClusterTabs id={selectedRows[0]?.values.ID} />
+          ) : (
+            <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+              <MultipleTags
+                limitTags={10}
+                tags={selectedRows?.map(
+                  ({ original, id, toggleRowSelected }) => (
+                    <Chip
+                      key={id}
+                      variant="text"
+                      label={original?.NAME ?? id}
+                      onDelete={() => toggleRowSelected(false)}
+                    />
+                  )
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </SplitPane>
  )
 }

--- a/src/fireedge/src/client/containers/Dashboard/Provision/index.js
+++ b/src/fireedge/src/client/containers/Dashboard/Provision/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 import { memo, ReactElement } from 'react'
 import PropTypes from 'prop-types'
-import { Container, Box, Grid, CircularProgress } from '@mui/material'
+import { Box, Grid, CircularProgress } from '@mui/material'
 import {
  Server as ClusterIcon,
  HardDrive as HostIcon,
@ -40,8 +40,8 @@ function ProvisionDashboard() {
  const { settings: { DISABLE_ANIMATIONS } = {} } = useAuth()

  return (
-    <Container
-      disableGutters
+    <Box
+      py={3}
      {...(stringToBoolean(DISABLE_ANIMATIONS) && {
        sx: {
          '& *, & *::before, & *::after': {
@ -50,43 +50,41 @@ function ProvisionDashboard() {
        },
      })}
    >
-      <Box py={3}>
-        <Grid container spacing={3}>
-          <Grid item container spacing={3} xs={12}>
-            <ResourceWidget
-              resource="cluster"
-              bgColor="#fa7892"
-              text={T.Clusters}
-              icon={ClusterIcon}
-            />
-            <ResourceWidget
-              resource="host"
-              bgColor="#b25aff"
-              text={T.Hosts}
-              icon={HostIcon}
-            />
-            <ResourceWidget
-              resource="datastore"
-              bgColor="#1fbbc6"
-              text={T.Datastores}
-              icon={DatastoreIcon}
-            />
-            <ResourceWidget
-              resource="network"
-              bgColor="#f09d42"
-              text={T.Networks}
-              icon={NetworkIcon}
-            />
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <TotalProviders />
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <TotalProvisionsByState />
-          </Grid>
+      <Grid container spacing={3}>
+        <Grid item container spacing={3} xs={12}>
+          <ResourceWidget
+            resource="cluster"
+            bgColor="#fa7892"
+            text={T.Clusters}
+            icon={ClusterIcon}
+          />
+          <ResourceWidget
+            resource="host"
+            bgColor="#b25aff"
+            text={T.Hosts}
+            icon={HostIcon}
+          />
+          <ResourceWidget
+            resource="datastore"
+            bgColor="#1fbbc6"
+            text={T.Datastores}
+            icon={DatastoreIcon}
+          />
+          <ResourceWidget
+            resource="network"
+            bgColor="#f09d42"
+            text={T.Networks}
+            icon={NetworkIcon}
+          />
        </Grid>
-      </Box>
-    </Container>
+        <Grid item xs={12} md={6}>
+          <TotalProviders />
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <TotalProvisionsByState />
+        </Grid>
+      </Grid>
+    </Box>
  )
 }

--- a/src/fireedge/src/client/containers/Dashboard/Sunstone/index.js
+++ b/src/fireedge/src/client/containers/Dashboard/Sunstone/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 import { memo, ReactElement } from 'react'
 import PropTypes from 'prop-types'
-import { Container, Box, CircularProgress, Grid } from '@mui/material'
+import { Box, CircularProgress, Grid } from '@mui/material'
 import {
  ModernTv as VmsIcons,
  List as TemplatesIcon,
@ -38,8 +38,8 @@ function SunstoneDashboard() {
  const { settings: { DISABLE_ANIMATIONS } = {} } = useAuth()

  return (
-    <Container
-      disableGutters
+    <Box
+      py={3}
      {...(stringToBoolean(DISABLE_ANIMATIONS) && {
        sx: {
          '& *, & *::before, & *::after': {
@ -48,39 +48,37 @@ function SunstoneDashboard() {
        },
      })}
    >
-      <Box py={3}>
-        <Grid
-          container
-          data-cy="dashboard-widget-total-sunstone-resources"
-          spacing={3}
-        >
-          <ResourceWidget
-            query={useGetVmsQuery}
-            bgColor="#fa7892"
-            text={T.VMs}
-            icon={VmsIcons}
-          />
-          <ResourceWidget
-            query={useGetTemplatesQuery}
-            bgColor="#b25aff"
-            text={T.VMTemplates}
-            icon={TemplatesIcon}
-          />
-          <ResourceWidget
-            query={useGetImagesQuery}
-            bgColor="#1fbbc6"
-            text={T.Images}
-            icon={ImageIcon}
-          />
-          <ResourceWidget
-            query={useGetVNetworksQuery}
-            bgColor="#f09d42"
-            text={T.VirtualNetworks}
-            icon={NetworkIcon}
-          />
-        </Grid>
-      </Box>
-    </Container>
+      <Grid
+        container
+        data-cy="dashboard-widget-total-sunstone-resources"
+        spacing={3}
+      >
+        <ResourceWidget
+          query={useGetVmsQuery}
+          bgColor="#fa7892"
+          text={T.VMs}
+          icon={VmsIcons}
+        />
+        <ResourceWidget
+          query={useGetTemplatesQuery}
+          bgColor="#b25aff"
+          text={T.VMTemplates}
+          icon={TemplatesIcon}
+        />
+        <ResourceWidget
+          query={useGetImagesQuery}
+          bgColor="#1fbbc6"
+          text={T.Images}
+          icon={ImageIcon}
+        />
+        <ResourceWidget
+          query={useGetVNetworksQuery}
+          bgColor="#f09d42"
+          text={T.VirtualNetworks}
+          icon={NetworkIcon}
+        />
+      </Grid>
+    </Box>
  )
 }

--- a/src/fireedge/src/client/containers/Datastores/index.js
+++ b/src/fireedge/src/client/containers/Datastores/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useState } from 'react'
-import { Container, Stack, Chip } from '@mui/material'
+import { Stack, Chip } from '@mui/material'

 import { DatastoresTable } from 'client/components/Tables'
 import DatastoreTabs from 'client/components/Tabs/Datastore'
@ -26,40 +26,33 @@ function Datastores() {
  const [selectedRows, onSelectedRowsChange] = useState(() => [])

  return (
-    <Stack height={1} py={2} overflow="auto" component={Container}>
-      <SplitPane>
-        <DatastoresTable onSelectedRowsChange={onSelectedRowsChange} />
+    <SplitPane>
+      <DatastoresTable onSelectedRowsChange={onSelectedRowsChange} />

-        {selectedRows?.length > 0 && (
-          <Stack overflow="auto">
-            {selectedRows?.length === 1 ? (
-              <DatastoreTabs id={selectedRows[0]?.values.ID} />
-            ) : (
-              <Stack
-                direction="row"
-                flexWrap="wrap"
-                gap={1}
-                alignItems="center"
-              >
-                <MultipleTags
-                  limitTags={10}
-                  tags={selectedRows?.map(
-                    ({ original, id, toggleRowSelected }) => (
-                      <Chip
-                        key={id}
-                        variant="text"
-                        label={original?.NAME ?? id}
-                        onDelete={() => toggleRowSelected(false)}
-                      />
-                    )
-                  )}
-                />
-              </Stack>
-            )}
-          </Stack>
-        )}
-      </SplitPane>
-    </Stack>
+      {selectedRows?.length > 0 && (
+        <Stack overflow="auto">
+          {selectedRows?.length === 1 ? (
+            <DatastoreTabs id={selectedRows[0]?.values.ID} />
+          ) : (
+            <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+              <MultipleTags
+                limitTags={10}
+                tags={selectedRows?.map(
+                  ({ original, id, toggleRowSelected }) => (
+                    <Chip
+                      key={id}
+                      variant="text"
+                      label={original?.NAME ?? id}
+                      onDelete={() => toggleRowSelected(false)}
+                    />
+                  )
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </SplitPane>
  )
 }

--- a/src/fireedge/src/client/containers/Groups/Detail.js
+++ b/src/fireedge/src/client/containers/Groups/Detail.js
@ -15,7 +15,6 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useParams, Redirect } from 'react-router-dom'
-import { Container, Box } from '@mui/material'

 // import GroupTabs from 'client/components/Tabs/Group'

@ -27,16 +26,10 @@ function GroupDetail() {
  }

  return (
-    <Box
-      py={2}
-      overflow="auto"
-      display="flex"
-      flexDirection="column"
-      component={Container}
-    >
+    <>
      {/* <GroupTabs id={id} /> */}
      {id}
-    </Box>
+    </>
  )
 }

--- a/src/fireedge/src/client/containers/Groups/index.js
+++ b/src/fireedge/src/client/containers/Groups/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useState } from 'react'
-import { Container, Stack, Chip } from '@mui/material'
+import { Stack, Chip } from '@mui/material'

 import { GroupsTable } from 'client/components/Tables'
 import GroupTabs from 'client/components/Tabs/Group'
@ -26,40 +26,33 @@ function Groups() {
  const [selectedRows, onSelectedRowsChange] = useState(() => [])

  return (
-    <Stack height={1} py={2} overflow="auto" component={Container}>
-      <SplitPane>
-        <GroupsTable onSelectedRowsChange={onSelectedRowsChange} />
+    <SplitPane>
+      <GroupsTable onSelectedRowsChange={onSelectedRowsChange} />

-        {selectedRows?.length > 0 && (
-          <Stack overflow="auto" data-cy={'detail'}>
-            {selectedRows?.length === 1 ? (
-              <GroupTabs id={selectedRows[0]?.values.ID} />
-            ) : (
-              <Stack
-                direction="row"
-                flexWrap="wrap"
-                gap={1}
-                alignItems="center"
-              >
-                <MultipleTags
-                  limitTags={10}
-                  tags={selectedRows?.map(
-                    ({ original, id, toggleRowSelected }) => (
-                      <Chip
-                        key={id}
-                        variant="text"
-                        label={original?.NAME ?? id}
-                        onDelete={() => toggleRowSelected(false)}
-                      />
-                    )
-                  )}
-                />
-              </Stack>
-            )}
-          </Stack>
-        )}
-      </SplitPane>
-    </Stack>
+      {selectedRows?.length > 0 && (
+        <Stack overflow="auto" data-cy={'detail'}>
+          {selectedRows?.length === 1 ? (
+            <GroupTabs id={selectedRows[0]?.values.ID} />
+          ) : (
+            <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+              <MultipleTags
+                limitTags={10}
+                tags={selectedRows?.map(
+                  ({ original, id, toggleRowSelected }) => (
+                    <Chip
+                      key={id}
+                      variant="text"
+                      label={original?.NAME ?? id}
+                      onDelete={() => toggleRowSelected(false)}
+                    />
+                  )
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </SplitPane>
  )
 }

--- a/src/fireedge/src/client/containers/Hosts/Create.js
+++ b/src/fireedge/src/client/containers/Hosts/Create.js
@ -15,7 +15,6 @@
 * ------------------------------------------------------------------------- */
 import { ReactElement } from 'react'
 import { useHistory, useLocation } from 'react-router'
-import { Container } from '@mui/material'

 import { useGeneralApi } from 'client/features/General'
 import {
@ -58,11 +57,9 @@ function CreateHost() {
  }

  return (
-    <Container sx={{ display: 'flex', flexFlow: 'column' }} disableGutters>
-      <CreateForm onSubmit={onSubmit} fallback={<SkeletonStepsForm />}>
-        {(config) => <DefaultFormStepper {...config} />}
-      </CreateForm>
-    </Container>
+    <CreateForm onSubmit={onSubmit} fallback={<SkeletonStepsForm />}>
+      {(config) => <DefaultFormStepper {...config} />}
+    </CreateForm>
  )
 }

--- a/src/fireedge/src/client/containers/Hosts/Detail.js
+++ b/src/fireedge/src/client/containers/Hosts/Detail.js
@ -15,7 +15,6 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useParams, Redirect } from 'react-router-dom'
-import { Container, Box } from '@mui/material'

 import HostTabs from 'client/components/Tabs/Host'

@ -26,17 +25,7 @@ function HostDetail() {
    return <Redirect to="/" />
  }

-  return (
-    <Box
-      py={2}
-      overflow="auto"
-      display="flex"
-      flexDirection="column"
-      component={Container}
-    >
-      <HostTabs id={id} />
-    </Box>
-  )
+  return <HostTabs id={id} />
 }

 export default HostDetail
--- a/src/fireedge/src/client/containers/Hosts/index.js
+++ b/src/fireedge/src/client/containers/Hosts/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useState } from 'react'
-import { Container, Stack, Chip } from '@mui/material'
+import { Stack, Chip } from '@mui/material'

 import { HostsTable } from 'client/components/Tables'
 import HostTabs from 'client/components/Tabs/Host'
@ -28,43 +28,36 @@ function Hosts() {
  const actions = HostActions()

  return (
-    <Stack height={1} py={2} overflow="auto" component={Container}>
-      <SplitPane>
-        <HostsTable
-          onSelectedRowsChange={onSelectedRowsChange}
-          globalActions={actions}
-        />
+    <SplitPane>
+      <HostsTable
+        onSelectedRowsChange={onSelectedRowsChange}
+        globalActions={actions}
+      />

-        {selectedRows?.length > 0 && (
-          <Stack overflow="auto">
-            {selectedRows?.length === 1 ? (
-              <HostTabs id={selectedRows[0]?.values.ID} />
-            ) : (
-              <Stack
-                direction="row"
-                flexWrap="wrap"
-                gap={1}
-                alignItems="center"
-              >
-                <MultipleTags
-                  limitTags={10}
-                  tags={selectedRows?.map(
-                    ({ original, id, toggleRowSelected }) => (
-                      <Chip
-                        key={id}
-                        variant="text"
-                        label={original?.NAME ?? id}
-                        onDelete={() => toggleRowSelected(false)}
-                      />
-                    )
-                  )}
-                />
-              </Stack>
-            )}
-          </Stack>
-        )}
-      </SplitPane>
-    </Stack>
+      {selectedRows?.length > 0 && (
+        <Stack overflow="auto">
+          {selectedRows?.length === 1 ? (
+            <HostTabs id={selectedRows[0]?.values.ID} />
+          ) : (
+            <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+              <MultipleTags
+                limitTags={10}
+                tags={selectedRows?.map(
+                  ({ original, id, toggleRowSelected }) => (
+                    <Chip
+                      key={id}
+                      variant="text"
+                      label={original?.NAME ?? id}
+                      onDelete={() => toggleRowSelected(false)}
+                    />
+                  )
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </SplitPane>
  )
 }

--- a/src/fireedge/src/client/containers/Images/index.js
+++ b/src/fireedge/src/client/containers/Images/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useState } from 'react'
-import { Container, Stack, Chip } from '@mui/material'
+import { Stack, Chip } from '@mui/material'

 import { ImagesTable } from 'client/components/Tables'
 import ImageTabs from 'client/components/Tabs/Image'
@ -26,40 +26,33 @@ function Images() {
  const [selectedRows, onSelectedRowsChange] = useState(() => [])

  return (
-    <Stack height={1} py={2} overflow="auto" component={Container}>
-      <SplitPane>
-        <ImagesTable onSelectedRowsChange={onSelectedRowsChange} />
+    <SplitPane>
+      <ImagesTable onSelectedRowsChange={onSelectedRowsChange} />

-        {selectedRows?.length > 0 && (
-          <Stack overflow="auto">
-            {selectedRows?.length === 1 ? (
-              <ImageTabs id={selectedRows[0]?.values.ID} />
-            ) : (
-              <Stack
-                direction="row"
-                flexWrap="wrap"
-                gap={1}
-                alignItems="center"
-              >
-                <MultipleTags
-                  limitTags={10}
-                  tags={selectedRows?.map(
-                    ({ original, id, toggleRowSelected }) => (
-                      <Chip
-                        key={id}
-                        variant="text"
-                        label={original?.NAME ?? id}
-                        onDelete={() => toggleRowSelected(false)}
-                      />
-                    )
-                  )}
-                />
-              </Stack>
-            )}
-          </Stack>
-        )}
-      </SplitPane>
-    </Stack>
+      {selectedRows?.length > 0 && (
+        <Stack overflow="auto">
+          {selectedRows?.length === 1 ? (
+            <ImageTabs id={selectedRows[0]?.values.ID} />
+          ) : (
+            <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+              <MultipleTags
+                limitTags={10}
+                tags={selectedRows?.map(
+                  ({ original, id, toggleRowSelected }) => (
+                    <Chip
+                      key={id}
+                      variant="text"
+                      label={original?.NAME ?? id}
+                      onDelete={() => toggleRowSelected(false)}
+                    />
+                  )
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </SplitPane>
  )
 }

--- a/src/fireedge/src/client/containers/MarketplaceApps/Create.js
+++ b/src/fireedge/src/client/containers/MarketplaceApps/Create.js
@ -15,7 +15,6 @@
 * ------------------------------------------------------------------------- */
 import { ReactElement } from 'react'
 import { useHistory, useLocation } from 'react-router'
-import { Container } from '@mui/material'

 import { useGeneralApi } from 'client/features/General'
 import {
@ -65,15 +64,13 @@ function CreateMarketplaceApp() {
  }

  return (
-    <Container sx={{ display: 'flex', flexFlow: 'column' }} disableGutters>
-      <CreateForm
-        initialValues={{ type: resourceName, id: ID }}
-        onSubmit={handleTriggerSubmit}
-        fallback={<SkeletonStepsForm />}
-      >
-        {(config) => <DefaultFormStepper {...config} />}
-      </CreateForm>
-    </Container>
+    <CreateForm
+      initialValues={{ type: resourceName, id: ID }}
+      onSubmit={handleTriggerSubmit}
+      fallback={<SkeletonStepsForm />}
+    >
+      {(config) => <DefaultFormStepper {...config} />}
+    </CreateForm>
  )
 }

--- a/src/fireedge/src/client/containers/MarketplaceApps/index.js
+++ b/src/fireedge/src/client/containers/MarketplaceApps/index.js
@ -14,7 +14,7 @@
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
 import { useState, JSXElementConstructor } from 'react'
-import { Container, Stack, Chip } from '@mui/material'
+import { Stack, Chip } from '@mui/material'

 import { MarketplaceAppsTable } from 'client/components/Tables'
 import MarketplaceAppActions from 'client/components/Tables/MarketplaceApps/actions'
@ -32,43 +32,36 @@ function MarketplaceApps() {
  const actions = MarketplaceAppActions()

  return (
-    <Stack height={1} py={2} overflow="auto" component={Container}>
-      <SplitPane>
-        <MarketplaceAppsTable
-          onSelectedRowsChange={onSelectedRowsChange}
-          globalActions={actions}
-        />
+    <SplitPane>
+      <MarketplaceAppsTable
+        onSelectedRowsChange={onSelectedRowsChange}
+        globalActions={actions}
+      />

-        {selectedRows?.length > 0 && (
-          <Stack overflow="auto">
-            {selectedRows?.length === 1 ? (
-              <MarketplaceAppsTabs id={selectedRows[0]?.original.ID} />
-            ) : (
-              <Stack
-                direction="row"
-                flexWrap="wrap"
-                gap={1}
-                alignItems="center"
-              >
-                <MultipleTags
-                  limitTags={10}
-                  tags={selectedRows?.map(
-                    ({ original, id, toggleRowSelected }) => (
-                      <Chip
-                        key={id}
-                        variant="text"
-                        label={original?.NAME ?? id}
-                        onDelete={() => toggleRowSelected(false)}
-                      />
-                    )
-                  )}
-                />
-              </Stack>
-            )}
-          </Stack>
-        )}
-      </SplitPane>
-    </Stack>
+      {selectedRows?.length > 0 && (
+        <Stack overflow="auto">
+          {selectedRows?.length === 1 ? (
+            <MarketplaceAppsTabs id={selectedRows[0]?.original.ID} />
+          ) : (
+            <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+              <MultipleTags
+                limitTags={10}
+                tags={selectedRows?.map(
+                  ({ original, id, toggleRowSelected }) => (
+                    <Chip
+                      key={id}
+                      variant="text"
+                      label={original?.NAME ?? id}
+                      onDelete={() => toggleRowSelected(false)}
+                    />
+                  )
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </SplitPane>
  )
 }

--- a/src/fireedge/src/client/containers/Marketplaces/index.js
+++ b/src/fireedge/src/client/containers/Marketplaces/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useState } from 'react'
-import { Container, Stack, Chip } from '@mui/material'
+import { Stack, Chip } from '@mui/material'

 import { MarketplacesTable } from 'client/components/Tables'
 import MarketplaceTabs from 'client/components/Tabs/Marketplace'
@ -26,40 +26,33 @@ function Marketplaces() {
  const [selectedRows, onSelectedRowsChange] = useState(() => [])

  return (
-    <Stack height={1} py={2} overflow="auto" component={Container}>
-      <SplitPane>
-        <MarketplacesTable onSelectedRowsChange={onSelectedRowsChange} />
+    <SplitPane>
+      <MarketplacesTable onSelectedRowsChange={onSelectedRowsChange} />

-        {selectedRows?.length > 0 && (
-          <Stack overflow="auto" data-cy={'detail'}>
-            {selectedRows?.length === 1 ? (
-              <MarketplaceTabs id={selectedRows[0]?.values.ID} />
-            ) : (
-              <Stack
-                direction="row"
-                flexWrap="wrap"
-                gap={1}
-                alignItems="center"
-              >
-                <MultipleTags
-                  limitTags={10}
-                  tags={selectedRows?.map(
-                    ({ original, id, toggleRowSelected }) => (
-                      <Chip
-                        key={id}
-                        variant="text"
-                        label={original?.NAME ?? id}
-                        onDelete={() => toggleRowSelected(false)}
-                      />
-                    )
-                  )}
-                />
-              </Stack>
-            )}
-          </Stack>
-        )}
-      </SplitPane>
-    </Stack>
+      {selectedRows?.length > 0 && (
+        <Stack overflow="auto" data-cy={'detail'}>
+          {selectedRows?.length === 1 ? (
+            <MarketplaceTabs id={selectedRows[0]?.values.ID} />
+          ) : (
+            <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+              <MultipleTags
+                limitTags={10}
+                tags={selectedRows?.map(
+                  ({ original, id, toggleRowSelected }) => (
+                    <Chip
+                      key={id}
+                      variant="text"
+                      label={original?.NAME ?? id}
+                      onDelete={() => toggleRowSelected(false)}
+                    />
+                  )
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </SplitPane>
  )
 }

--- a/src/fireedge/src/client/containers/Providers/Create.js
+++ b/src/fireedge/src/client/containers/Providers/Create.js
@ -15,7 +15,6 @@
 * ------------------------------------------------------------------------- */
 import { useEffect, ReactElement } from 'react'
 import { useParams, useHistory, Redirect } from 'react-router'
-import { Container } from '@mui/material'

 import { useGeneralApi } from 'client/features/General'
 import {
@ -118,21 +117,17 @@ function ProviderCreateForm() {
    }
  }

-  return (
-    <Container sx={{ display: 'flex', flexFlow: 'column' }} disableGutters>
-      {id && (!providerConfig || !connection || !provider) ? (
-        <SkeletonStepsForm />
-      ) : (
-        <CreateForm
-          initialValues={getInitialValues()}
-          stepProps={{ isUpdate: id !== undefined }}
-          onSubmit={onSubmit}
-          fallback={<SkeletonStepsForm />}
-        >
-          {(config) => <DefaultFormStepper {...config} />}
-        </CreateForm>
-      )}
-    </Container>
+  return id && (!providerConfig || !connection || !provider) ? (
+    <SkeletonStepsForm />
+  ) : (
+    <CreateForm
+      initialValues={getInitialValues()}
+      stepProps={{ isUpdate: id !== undefined }}
+      onSubmit={onSubmit}
+      fallback={<SkeletonStepsForm />}
+    >
+      {(config) => <DefaultFormStepper {...config} />}
+    </CreateForm>
  )
 }

--- a/src/fireedge/src/client/containers/Providers/index.js
+++ b/src/fireedge/src/client/containers/Providers/index.js
@ -17,7 +17,7 @@ import { memo, ReactElement, useEffect } from 'react'
 import PropTypes from 'prop-types'

 import { useHistory, generatePath } from 'react-router-dom'
-import { Container, Box, Backdrop, CircularProgress } from '@mui/material'
+import { Box, Backdrop, CircularProgress } from '@mui/material'
 import { Trash as DeleteIcon, Settings as EditIcon } from 'iconoir-react'

 import {
@ -74,64 +74,60 @@ function Providers() {

  return (
    <>
-      <Container disableGutters>
-        <ListHeader
-          title={T.Providers}
-          reloadButtonProps={{
-            'data-cy': 'refresh-provider-list',
-            onClick: () => refetch(),
-            isSubmitting: isFetching,
-          }}
-          addButtonProps={{
-            'data-cy': 'create-provider',
-            onClick: () => history.push(PATH.PROVIDERS.CREATE),
-          }}
-          searchProps={{ handleChange }}
-        />
-        <Box p={3}>
-          {error ? (
-            <AlertError>{T.CannotConnectOneProvision}</AlertError>
-          ) : (
-            <ListCards
-              list={result ?? providers}
-              gridProps={{ 'data-cy': 'providers' }}
-              CardComponent={ProvisionCard}
-              cardsProps={({ value: { ID, NAME, TEMPLATE } }) => ({
-                image: providerConfig[TEMPLATE?.PLAIN?.provider]?.image,
-                isProvider: true,
-                handleClick: () => show({ id: ID, title: `#${ID} ${NAME}` }),
-                actions: [
-                  {
-                    handleClick: () =>
-                      history.push(
-                        generatePath(PATH.PROVIDERS.EDIT, { id: ID })
+      <ListHeader
+        title={T.Providers}
+        reloadButtonProps={{
+          'data-cy': 'refresh-provider-list',
+          onClick: () => refetch(),
+          isSubmitting: isFetching,
+        }}
+        addButtonProps={{
+          'data-cy': 'create-provider',
+          onClick: () => history.push(PATH.PROVIDERS.CREATE),
+        }}
+        searchProps={{ handleChange }}
+      />
+      <Box p={3}>
+        {error ? (
+          <AlertError>{T.CannotConnectOneProvision}</AlertError>
+        ) : (
+          <ListCards
+            list={result ?? providers}
+            gridProps={{ 'data-cy': 'providers' }}
+            CardComponent={ProvisionCard}
+            cardsProps={({ value: { ID, NAME, TEMPLATE } }) => ({
+              image: providerConfig[TEMPLATE?.PLAIN?.provider]?.image,
+              isProvider: true,
+              handleClick: () => show({ id: ID, title: `#${ID} ${NAME}` }),
+              actions: [
+                {
+                  handleClick: () =>
+                    history.push(generatePath(PATH.PROVIDERS.EDIT, { id: ID })),
+                  icon: <EditIcon />,
+                  cy: 'provider-edit',
+                },
+                {
+                  handleClick: () =>
+                    show({
+                      id: ID,
+                      title: (
+                        <Translate
+                          word={T.DeleteSomething}
+                          values={`#${ID} ${NAME}`}
+                        />
                      ),
-                    icon: <EditIcon />,
-                    cy: 'provider-edit',
-                  },
-                  {
-                    handleClick: () =>
-                      show({
-                        id: ID,
-                        title: (
-                          <Translate
-                            word={T.DeleteSomething}
-                            values={`#${ID} ${NAME}`}
-                          />
-                        ),
-                        handleAccept: () => handleDelete(ID),
-                      }),
-                    icon: <DeleteIcon />,
-                    isSubmitting: isDeleting,
-                    color: 'error',
-                    cy: 'provider-delete',
-                  },
-                ],
-              })}
-            />
-          )}
-        </Box>
-      </Container>
+                      handleAccept: () => handleDelete(ID),
+                    }),
+                  icon: <DeleteIcon />,
+                  isSubmitting: isDeleting,
+                  color: 'error',
+                  cy: 'provider-delete',
+                },
+              ],
+            })}
+          />
+        )}
+      </Box>
      {display && dialogProps?.id && (
        <DialogProvider
          hide={hide}
--- a/src/fireedge/src/client/containers/Provisions/Create.js
+++ b/src/fireedge/src/client/containers/Provisions/Create.js
@ -17,7 +17,7 @@ import { useState, memo, ReactElement } from 'react'
 import { Redirect, useHistory } from 'react-router'

 import { NavArrowLeft as ArrowBackIcon } from 'iconoir-react'
-import { Box, Container, IconButton, Typography } from '@mui/material'
+import { Box, IconButton, Typography } from '@mui/material'

 import { useSocket } from 'client/hooks'
 import { useGeneralApi } from 'client/features/General'
@ -64,16 +64,12 @@ function ProvisionCreateForm() {
    return <Redirect to={PATH.PROVISIONS.LIST} />
  }

-  return (
-    <Container sx={{ display: 'flex', flexDirection: 'column' }} disableGutters>
-      {!providers || isLoading ? (
-        <SkeletonStepsForm />
-      ) : (
-        <CreateForm onSubmit={onSubmit} fallback={<SkeletonStepsForm />}>
-          {(config) => <DefaultFormStepper {...config} />}
-        </CreateForm>
-      )}
-    </Container>
+  return !providers || isLoading ? (
+    <SkeletonStepsForm />
+  ) : (
+    <CreateForm onSubmit={onSubmit} fallback={<SkeletonStepsForm />}>
+      {(config) => <DefaultFormStepper {...config} />}
+    </CreateForm>
  )
 }

--- a/src/fireedge/src/client/containers/Provisions/index.js
+++ b/src/fireedge/src/client/containers/Provisions/index.js
@ -16,7 +16,7 @@
 import { ReactElement } from 'react'

 import { useHistory } from 'react-router-dom'
-import { Container, Box, Backdrop, CircularProgress } from '@mui/material'
+import { Box, Backdrop, CircularProgress } from '@mui/material'
 import { Trash as DeleteIcon, Settings as EditIcon } from 'iconoir-react'

 import {
@ -81,73 +81,71 @@ function Provisions() {

  return (
    <>
-      <Container disableGutters>
-        <ListHeader
-          title={T.Provisions}
-          reloadButtonProps={{
-            'data-cy': 'refresh-provision-list',
-            onClick: () => refetch(),
-            isSubmitting: isFetching,
-          }}
-          addButtonProps={{
-            'data-cy': 'create-provision',
-            onClick: () => history.push(PATH.PROVISIONS.CREATE),
-          }}
-          searchProps={{ handleChange }}
-        />
-        <Box p={3}>
-          {error ? (
-            <AlertError>{T.CannotConnectOneProvision}</AlertError>
-          ) : (
-            <ListCards
-              list={result ?? provisions}
-              gridProps={{ 'data-cy': 'provisions' }}
-              CardComponent={ProvisionCard}
-              cardsProps={({ value: { ID, NAME } }) => ({
-                handleClick: () => handleClickfn(ID, NAME),
-                actions: [
+      <ListHeader
+        title={T.Provisions}
+        reloadButtonProps={{
+          'data-cy': 'refresh-provision-list',
+          onClick: () => refetch(),
+          isSubmitting: isFetching,
+        }}
+        addButtonProps={{
+          'data-cy': 'create-provision',
+          onClick: () => history.push(PATH.PROVISIONS.CREATE),
+        }}
+        searchProps={{ handleChange }}
+      />
+      <Box p={3}>
+        {error ? (
+          <AlertError>{T.CannotConnectOneProvision}</AlertError>
+        ) : (
+          <ListCards
+            list={result ?? provisions}
+            gridProps={{ 'data-cy': 'provisions' }}
+            CardComponent={ProvisionCard}
+            cardsProps={({ value: { ID, NAME } }) => ({
+              handleClick: () => handleClickfn(ID, NAME),
+              actions: [
+                {
+                  handleClick: async () => {
+                    await configureProvision({ id: ID })
+                    enqueueInfo(`Configuring provision - ID: ${ID}`)
+                  },
+                  icon: <EditIcon />,
+                  cy: 'provision-configure',
+                },
+              ],
+              deleteAction: {
+                buttonProps: {
+                  'data-cy': 'provision-delete',
+                  icon: <DeleteIcon />,
+                  color: 'error',
+                },
+                options: [
                  {
-                    handleClick: async () => {
-                      await configureProvision({ id: ID })
-                      enqueueInfo(`Configuring provision - ID: ${ID}`)
+                    dialogProps: {
+                      title: (
+                        <Translate
+                          word={T.DeleteSomething}
+                          values={`#${ID} ${NAME}`}
+                        />
+                      ),
+                    },
+                    form: DeleteForm,
+                    onSubmit: async (formData) => {
+                      try {
+                        await deleteProvision({ id: ID, ...formData })
+                        enqueueInfo(`Deleting provision - ID: ${ID}`)
+                      } finally {
+                        hide()
+                      }
                    },
-                    icon: <EditIcon />,
-                    cy: 'provision-configure',
                  },
                ],
-                deleteAction: {
-                  buttonProps: {
-                    'data-cy': 'provision-delete',
-                    icon: <DeleteIcon />,
-                    color: 'error',
-                  },
-                  options: [
-                    {
-                      dialogProps: {
-                        title: (
-                          <Translate
-                            word={T.DeleteSomething}
-                            values={`#${ID} ${NAME}`}
-                          />
-                        ),
-                      },
-                      form: DeleteForm,
-                      onSubmit: async (formData) => {
-                        try {
-                          await deleteProvision({ id: ID, ...formData })
-                          enqueueInfo(`Deleting provision - ID: ${ID}`)
-                        } finally {
-                          hide()
-                        }
-                      },
-                    },
-                  ],
-                },
-              })}
-            />
-          )}
-        </Box>
-      </Container>
+              },
+            })}
+          />
+        )}
+      </Box>
      {display &&
        !provisionError &&
        (provisionDetail?.ID !== originalArgs || provisionIsLoading ? (
--- a/src/fireedge/src/client/containers/Settings/index.js
+++ b/src/fireedge/src/client/containers/Settings/index.js
@ -14,7 +14,7 @@
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
 import { ReactElement } from 'react'
-import { Container, Typography, Divider, Stack } from '@mui/material'
+import { Typography, Divider, Stack } from '@mui/material'

 import { Translate } from 'client/components/HOC'
 import { T } from 'client/constants'
@ -24,7 +24,7 @@ import AuthenticationSection from 'client/containers/Settings/Authentication'

 /** @returns {ReactElement} Settings container */
 const Settings = () => (
-  <Container disableGutters>
+  <>
    <Typography variant="h5">
      <Translate word={T.Settings} />
    </Typography>
@ -35,7 +35,7 @@ const Settings = () => (
      <ConfigurationUISection />
      <AuthenticationSection />
    </Stack>
-  </Container>
+  </>
 )

 export default Settings
--- a/src/fireedge/src/client/containers/TestApi/index.js
+++ b/src/fireedge/src/client/containers/TestApi/index.js
@ -14,7 +14,7 @@
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
 import { useState, useMemo, JSXElementConstructor } from 'react'
-import { Container, TextField, Autocomplete, Grid, Box } from '@mui/material'
+import { TextField, Autocomplete, Grid, Box } from '@mui/material'

 import ResponseForm from 'client/containers/TestApi/ResponseForm'
 import { InputCode } from 'client/components/FormControl'
@ -40,36 +40,31 @@ function TestApi() {
  const handleChangeResponse = (res) => setResponse(res)

  return (
-    <Container
-      disableGutters
-      sx={{ display: 'flex', flexFlow: 'column', height: '100%' }}
-    >
-      <Grid container direction="row" spacing={2} className={classes.root}>
-        <Grid item xs={12} md={6}>
-          <Autocomplete
-            disablePortal
-            color="secondary"
-            options={useMemo(() => COMMANDS, [])}
-            value={name}
-            onChange={handleChangeCommand}
-            renderInput={(params) => (
-              <TextField {...params} label={Tr(T.SelectRequest)} />
-            )}
-          />
-          {name && name !== '' && (
-            <ResponseForm
-              handleChangeResponse={handleChangeResponse}
-              command={{ name, ...Commands[name] }}
-            />
+    <Grid container direction="row" spacing={2} className={classes.root}>
+      <Grid item xs={12} md={6}>
+        <Autocomplete
+          disablePortal
+          color="secondary"
+          options={useMemo(() => COMMANDS, [])}
+          value={name}
+          onChange={handleChangeCommand}
+          renderInput={(params) => (
+            <TextField {...params} label={Tr(T.SelectRequest)} />
          )}
-        </Grid>
-        <Grid item xs={12} md={6}>
-          <Box height="100%" minHeight={200}>
-            <InputCode code={response} readOnly />
-          </Box>
-        </Grid>
+        />
+        {name && name !== '' && (
+          <ResponseForm
+            handleChangeResponse={handleChangeResponse}
+            command={{ name, ...Commands[name] }}
+          />
+        )}
      </Grid>
-    </Container>
+      <Grid item xs={12} md={6}>
+        <Box height="100%" minHeight={200}>
+          <InputCode code={response} readOnly />
+        </Box>
+      </Grid>
+    </Grid>
  )
 }

--- a/src/fireedge/src/client/containers/TestForm/index.js
+++ b/src/fireedge/src/client/containers/TestForm/index.js
@ -13,8 +13,8 @@
 * See the License for the specific language governing permissions and       *
 * limitations under the License.                                            *
 * ------------------------------------------------------------------------- */
-import { useMemo, JSXElementConstructor } from 'react'
-import { Container, Grid, Button } from '@mui/material'
+import { useMemo, ReactElement } from 'react'
+import { Grid, Button } from '@mui/material'
 import { useForm, FormProvider } from 'react-hook-form'
 import { object } from 'yup'
 import { yupResolver } from '@hookform/resolvers/yup'
@ -22,8 +22,8 @@ import { yupResolver } from '@hookform/resolvers/yup'
 import { FormWithSchema } from 'client/components/Forms'

 /**
- * @returns {JSXElementConstructor}
- * - Component that allows you to test a form and their components
+ * @returns {ReactElement}
+ * Component that allows you to test a form and their components
 */
 function TestForm() {
  const fields = useMemo(
@ -45,20 +45,24 @@ function TestForm() {
  }

  return (
-    <Container component="form" onSubmit={methods.handleSubmit(onSubmit)}>
-      <Grid container direction="row" spacing={2}>
-        <Grid item xs={12}>
-          <FormProvider {...methods}>
-            <FormWithSchema fields={fields} />
-          </FormProvider>
-        </Grid>
-        <Grid item xs={12}>
-          <Button type="submit" variant="contained">
-            {'Submit'}
-          </Button>
-        </Grid>
+    <Grid
+      container
+      direction="row"
+      spacing={2}
+      component="form"
+      onSubmit={methods.handleSubmit(onSubmit)}
+    >
+      <Grid item xs={12}>
+        <FormProvider {...methods}>
+          <FormWithSchema fields={fields} />
+        </FormProvider>
      </Grid>
-    </Container>
+      <Grid item xs={12}>
+        <Button type="submit" variant="contained">
+          {'Submit'}
+        </Button>
+      </Grid>
+    </Grid>
  )
 }

--- a/src/fireedge/src/client/containers/Users/Detail.js
+++ b/src/fireedge/src/client/containers/Users/Detail.js
@ -15,7 +15,6 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useParams, Redirect } from 'react-router-dom'
-import { Container, Box } from '@mui/material'

 import UserTabs from 'client/components/Tabs/User'

@ -26,17 +25,7 @@ function UserDetail() {
    return <Redirect to="/" />
  }

-  return (
-    <Box
-      py={2}
-      overflow="auto"
-      display="flex"
-      flexDirection="column"
-      component={Container}
-    >
-      <UserTabs id={id} />
-    </Box>
-  )
+  return <UserTabs id={id} />
 }

 export default UserDetail
--- a/src/fireedge/src/client/containers/Users/index.js
+++ b/src/fireedge/src/client/containers/Users/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useState } from 'react'
-import { Container, Stack, Chip } from '@mui/material'
+import { Stack, Chip } from '@mui/material'

 import { UsersTable } from 'client/components/Tables'
 import UserTabs from 'client/components/Tabs/User'
@ -26,40 +26,33 @@ function Users() {
  const [selectedRows, onSelectedRowsChange] = useState(() => [])

  return (
-    <Stack height={1} py={2} overflow="auto" component={Container}>
-      <SplitPane>
-        <UsersTable onSelectedRowsChange={onSelectedRowsChange} />
+    <SplitPane>
+      <UsersTable onSelectedRowsChange={onSelectedRowsChange} />

-        {selectedRows?.length > 0 && (
-          <Stack overflow="auto" data-cy={'detail'}>
-            {selectedRows?.length === 1 ? (
-              <UserTabs id={selectedRows[0]?.values.ID} />
-            ) : (
-              <Stack
-                direction="row"
-                flexWrap="wrap"
-                gap={1}
-                alignItems="center"
-              >
-                <MultipleTags
-                  limitTags={10}
-                  tags={selectedRows?.map(
-                    ({ original, id, toggleRowSelected }) => (
-                      <Chip
-                        key={id}
-                        variant="text"
-                        label={original?.NAME ?? id}
-                        onDelete={() => toggleRowSelected(false)}
-                      />
-                    )
-                  )}
-                />
-              </Stack>
-            )}
-          </Stack>
-        )}
-      </SplitPane>
-    </Stack>
+      {selectedRows?.length > 0 && (
+        <Stack overflow="auto" data-cy={'detail'}>
+          {selectedRows?.length === 1 ? (
+            <UserTabs id={selectedRows[0]?.values.ID} />
+          ) : (
+            <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+              <MultipleTags
+                limitTags={10}
+                tags={selectedRows?.map(
+                  ({ original, id, toggleRowSelected }) => (
+                    <Chip
+                      key={id}
+                      variant="text"
+                      label={original?.NAME ?? id}
+                      onDelete={() => toggleRowSelected(false)}
+                    />
+                  )
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </SplitPane>
  )
 }

--- a/src/fireedge/src/client/containers/VNetworkTemplates/index.js
+++ b/src/fireedge/src/client/containers/VNetworkTemplates/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useState } from 'react'
-import { Container, Stack, Chip } from '@mui/material'
+import { Stack, Chip } from '@mui/material'

 import { VNetworkTemplatesTable } from 'client/components/Tables'
 import VNetworkTemplateTabs from 'client/components/Tabs/VNetworkTemplate'
@ -26,40 +26,33 @@ function VNetworkTemplates() {
  const [selectedRows, onSelectedRowsChange] = useState(() => [])

  return (
-    <Stack height={1} py={2} overflow="auto" component={Container}>
-      <SplitPane>
-        <VNetworkTemplatesTable onSelectedRowsChange={onSelectedRowsChange} />
+    <SplitPane>
+      <VNetworkTemplatesTable onSelectedRowsChange={onSelectedRowsChange} />

-        {selectedRows?.length > 0 && (
-          <Stack overflow="auto" data-cy={'detail'}>
-            {selectedRows?.length === 1 ? (
-              <VNetworkTemplateTabs id={selectedRows[0]?.values.ID} />
-            ) : (
-              <Stack
-                direction="row"
-                flexWrap="wrap"
-                gap={1}
-                alignItems="center"
-              >
-                <MultipleTags
-                  limitTags={10}
-                  tags={selectedRows?.map(
-                    ({ original, id, toggleRowSelected }) => (
-                      <Chip
-                        key={id}
-                        variant="text"
-                        label={original?.NAME ?? id}
-                        onDelete={() => toggleRowSelected(false)}
-                      />
-                    )
-                  )}
-                />
-              </Stack>
-            )}
-          </Stack>
-        )}
-      </SplitPane>
-    </Stack>
+      {selectedRows?.length > 0 && (
+        <Stack overflow="auto" data-cy={'detail'}>
+          {selectedRows?.length === 1 ? (
+            <VNetworkTemplateTabs id={selectedRows[0]?.values.ID} />
+          ) : (
+            <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+              <MultipleTags
+                limitTags={10}
+                tags={selectedRows?.map(
+                  ({ original, id, toggleRowSelected }) => (
+                    <Chip
+                      key={id}
+                      variant="text"
+                      label={original?.NAME ?? id}
+                      onDelete={() => toggleRowSelected(false)}
+                    />
+                  )
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </SplitPane>
  )
 }

--- a/src/fireedge/src/client/containers/VirtualMachines/Detail.js
+++ b/src/fireedge/src/client/containers/VirtualMachines/Detail.js
@ -15,7 +15,6 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useParams, Redirect } from 'react-router-dom'
-import { Container, Box } from '@mui/material'

 import VmTabs from 'client/components/Tabs/Vm'

@ -26,17 +25,7 @@ function VirtualMachineDetail() {
    return <Redirect to="/" />
  }

-  return (
-    <Box
-      py={2}
-      overflow="auto"
-      display="flex"
-      flexDirection="column"
-      component={Container}
-    >
-      <VmTabs id={id} />
-    </Box>
-  )
+  return <VmTabs id={id} />
 }

 export default VirtualMachineDetail
--- a/src/fireedge/src/client/containers/VirtualMachines/index.js
+++ b/src/fireedge/src/client/containers/VirtualMachines/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useState } from 'react'
-import { Container, Stack, Chip } from '@mui/material'
+import { Stack, Chip } from '@mui/material'

 import { VmsTable } from 'client/components/Tables'
 import VmActions from 'client/components/Tables/Vms/actions'
@ -28,43 +28,36 @@ function VirtualMachines() {
  const actions = VmActions()

  return (
-    <Stack height={1} py={2} overflow="auto" component={Container}>
-      <SplitPane>
-        <VmsTable
-          onSelectedRowsChange={onSelectedRowsChange}
-          globalActions={actions}
-        />
+    <SplitPane>
+      <VmsTable
+        onSelectedRowsChange={onSelectedRowsChange}
+        globalActions={actions}
+      />

-        {selectedRows?.length > 0 && (
-          <Stack overflow="auto" data-cy={'detail'}>
-            {selectedRows?.length === 1 ? (
-              <VmTabs id={selectedRows[0]?.original.ID} />
-            ) : (
-              <Stack
-                direction="row"
-                flexWrap="wrap"
-                gap={1}
-                alignItems="center"
-              >
-                <MultipleTags
-                  limitTags={10}
-                  tags={selectedRows?.map(
-                    ({ original, id, toggleRowSelected }) => (
-                      <Chip
-                        key={id}
-                        variant="outlined"
-                        label={original?.NAME ?? id}
-                        onDelete={() => toggleRowSelected(false)}
-                      />
-                    )
-                  )}
-                />
-              </Stack>
-            )}
-          </Stack>
-        )}
-      </SplitPane>
-    </Stack>
+      {selectedRows?.length > 0 && (
+        <Stack overflow="auto" data-cy={'detail'}>
+          {selectedRows?.length === 1 ? (
+            <VmTabs id={selectedRows[0]?.original.ID} />
+          ) : (
+            <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+              <MultipleTags
+                limitTags={10}
+                tags={selectedRows?.map(
+                  ({ original, id, toggleRowSelected }) => (
+                    <Chip
+                      key={id}
+                      variant="outlined"
+                      label={original?.NAME ?? id}
+                      onDelete={() => toggleRowSelected(false)}
+                    />
+                  )
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </SplitPane>
  )
 }

--- a/src/fireedge/src/client/containers/VirtualNetworks/index.js
+++ b/src/fireedge/src/client/containers/VirtualNetworks/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useState } from 'react'
-import { Container, Stack, Chip } from '@mui/material'
+import { Stack, Chip } from '@mui/material'

 import { VNetworksTable } from 'client/components/Tables'
 import VNetworkTabs from 'client/components/Tabs/VNetwork'
@ -26,40 +26,33 @@ function VirtualNetworks() {
  const [selectedRows, onSelectedRowsChange] = useState(() => [])

  return (
-    <Stack height={1} py={2} overflow="auto" component={Container}>
-      <SplitPane>
-        <VNetworksTable onSelectedRowsChange={onSelectedRowsChange} />
+    <SplitPane>
+      <VNetworksTable onSelectedRowsChange={onSelectedRowsChange} />

-        {selectedRows?.length > 0 && (
-          <Stack overflow="auto" data-cy={'detail'}>
-            {selectedRows?.length === 1 ? (
-              <VNetworkTabs id={selectedRows[0]?.original.ID} />
-            ) : (
-              <Stack
-                direction="row"
-                flexWrap="wrap"
-                gap={1}
-                alignItems="center"
-              >
-                <MultipleTags
-                  limitTags={10}
-                  tags={selectedRows?.map(
-                    ({ original, id, toggleRowSelected }) => (
-                      <Chip
-                        key={id}
-                        variant="text"
-                        label={original?.NAME ?? id}
-                        onDelete={() => toggleRowSelected(false)}
-                      />
-                    )
-                  )}
-                />
-              </Stack>
-            )}
-          </Stack>
-        )}
-      </SplitPane>
-    </Stack>
+      {selectedRows?.length > 0 && (
+        <Stack overflow="auto" data-cy={'detail'}>
+          {selectedRows?.length === 1 ? (
+            <VNetworkTabs id={selectedRows[0]?.original.ID} />
+          ) : (
+            <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+              <MultipleTags
+                limitTags={10}
+                tags={selectedRows?.map(
+                  ({ original, id, toggleRowSelected }) => (
+                    <Chip
+                      key={id}
+                      variant="text"
+                      label={original?.NAME ?? id}
+                      onDelete={() => toggleRowSelected(false)}
+                    />
+                  )
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </SplitPane>
  )
 }

--- a/src/fireedge/src/client/containers/VirtualRouters/index.js
+++ b/src/fireedge/src/client/containers/VirtualRouters/index.js
@ -15,23 +15,10 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */

-import { Container, Box } from '@mui/material'
-
 import { VRoutersTable } from 'client/components/Tables'

 function VirtualRouters() {
-  return (
-    <Box
-      height={1}
-      py={2}
-      overflow="auto"
-      display="flex"
-      flexDirection="column"
-      component={Container}
-    >
-      <VRoutersTable />
-    </Box>
-  )
+  return <VRoutersTable />
 }

 export default VirtualRouters
--- a/src/fireedge/src/client/containers/VmTemplates/Create.js
+++ b/src/fireedge/src/client/containers/VmTemplates/Create.js
@ -15,7 +15,6 @@
 * ------------------------------------------------------------------------- */
 import { useEffect, ReactElement } from 'react'
 import { useHistory, useLocation } from 'react-router'
-import { Container } from '@mui/material'

 import { useGeneralApi } from 'client/features/General'
 import {
@ -75,21 +74,17 @@ function CreateVmTemplate() {
    templateId && getTemplate({ id: templateId, extended: true })
  }, [])

-  return (
-    <Container sx={{ display: 'flex', flexFlow: 'column' }} disableGutters>
-      {templateId && !data ? (
-        <SkeletonStepsForm />
-      ) : (
-        <CreateForm
-          initialValues={data}
-          stepProps={data}
-          onSubmit={onSubmit}
-          fallback={<SkeletonStepsForm />}
-        >
-          {(config) => <DefaultFormStepper {...config} />}
-        </CreateForm>
-      )}
-    </Container>
+  return templateId && !data ? (
+    <SkeletonStepsForm />
+  ) : (
+    <CreateForm
+      initialValues={data}
+      stepProps={data}
+      onSubmit={onSubmit}
+      fallback={<SkeletonStepsForm />}
+    >
+      {(config) => <DefaultFormStepper {...config} />}
+    </CreateForm>
  )
 }

--- a/src/fireedge/src/client/containers/VmTemplates/Instantiate.js
+++ b/src/fireedge/src/client/containers/VmTemplates/Instantiate.js
@ -15,7 +15,6 @@
 * ------------------------------------------------------------------------- */
 import { ReactElement } from 'react'
 import { useHistory, useLocation, Redirect } from 'react-router'
-import { Container } from '@mui/material'

 import { useGeneralApi } from 'client/features/General'
 import {
@ -70,21 +69,17 @@ function InstantiateVmTemplate() {
    return <Redirect to={PATH.TEMPLATE.VMS.LIST} />
  }

-  return (
-    <Container sx={{ display: 'flex', flexFlow: 'column' }} disableGutters>
-      {!data ? (
-        <SkeletonStepsForm />
-      ) : (
-        <InstantiateForm
-          initialValues={data}
-          stepProps={data}
-          onSubmit={onSubmit}
-          fallback={<SkeletonStepsForm />}
-        >
-          {(config) => <DefaultFormStepper {...config} />}
-        </InstantiateForm>
-      )}
-    </Container>
+  return !data ? (
+    <SkeletonStepsForm />
+  ) : (
+    <InstantiateForm
+      initialValues={data}
+      stepProps={data}
+      onSubmit={onSubmit}
+      fallback={<SkeletonStepsForm />}
+    >
+      {(config) => <DefaultFormStepper {...config} />}
+    </InstantiateForm>
  )
 }

--- a/src/fireedge/src/client/containers/VmTemplates/index.js
+++ b/src/fireedge/src/client/containers/VmTemplates/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useState } from 'react'
-import { Container, Stack, Chip } from '@mui/material'
+import { Stack, Chip } from '@mui/material'

 import { VmTemplatesTable } from 'client/components/Tables'
 import VmTemplateActions from 'client/components/Tables/VmTemplates/actions'
@ -28,43 +28,36 @@ function VmTemplates() {
  const actions = VmTemplateActions()

  return (
-    <Stack height={1} py={2} overflow="auto" component={Container}>
-      <SplitPane>
-        <VmTemplatesTable
-          onSelectedRowsChange={onSelectedRowsChange}
-          globalActions={actions}
-        />
+    <SplitPane>
+      <VmTemplatesTable
+        onSelectedRowsChange={onSelectedRowsChange}
+        globalActions={actions}
+      />

-        {selectedRows?.length > 0 && (
-          <Stack overflow="auto">
-            {selectedRows?.length === 1 ? (
-              <VmTemplateTabs id={selectedRows[0]?.original.ID} />
-            ) : (
-              <Stack
-                direction="row"
-                flexWrap="wrap"
-                gap={1}
-                alignItems="center"
-              >
-                <MultipleTags
-                  limitTags={10}
-                  tags={selectedRows?.map(
-                    ({ original, id, toggleRowSelected }) => (
-                      <Chip
-                        key={id}
-                        variant="text"
-                        label={original?.NAME ?? id}
-                        onDelete={() => toggleRowSelected(false)}
-                      />
-                    )
-                  )}
-                />
-              </Stack>
-            )}
-          </Stack>
-        )}
-      </SplitPane>
-    </Stack>
+      {selectedRows?.length > 0 && (
+        <Stack overflow="auto">
+          {selectedRows?.length === 1 ? (
+            <VmTemplateTabs id={selectedRows[0]?.original.ID} />
+          ) : (
+            <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+              <MultipleTags
+                limitTags={10}
+                tags={selectedRows?.map(
+                  ({ original, id, toggleRowSelected }) => (
+                    <Chip
+                      key={id}
+                      variant="text"
+                      label={original?.NAME ?? id}
+                      onDelete={() => toggleRowSelected(false)}
+                    />
+                  )
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </SplitPane>
  )
 }

--- a/src/fireedge/src/client/containers/Zones/index.js
+++ b/src/fireedge/src/client/containers/Zones/index.js
@ -15,7 +15,7 @@
 * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
 import { useState } from 'react'
-import { Container, Stack, Chip } from '@mui/material'
+import { Stack, Chip } from '@mui/material'

 import { ZonesTable } from 'client/components/Tables'
 import ZoneTabs from 'client/components/Tabs/Zone'
@ -26,40 +26,33 @@ function Zones() {
  const [selectedRows, onSelectedRowsChange] = useState(() => [])

  return (
-    <Stack height={1} py={2} overflow="auto" component={Container}>
-      <SplitPane>
-        <ZonesTable onSelectedRowsChange={onSelectedRowsChange} />
+    <SplitPane>
+      <ZonesTable onSelectedRowsChange={onSelectedRowsChange} />

-        {selectedRows?.length > 0 && (
-          <Stack overflow="auto" data-cy={'detail'}>
-            {selectedRows?.length === 1 ? (
-              <ZoneTabs id={selectedRows[0]?.values.ID} />
-            ) : (
-              <Stack
-                direction="row"
-                flexWrap="wrap"
-                gap={1}
-                alignItems="center"
-              >
-                <MultipleTags
-                  limitTags={10}
-                  tags={selectedRows?.map(
-                    ({ original, id, toggleRowSelected }) => (
-                      <Chip
-                        key={id}
-                        variant="text"
-                        label={original?.NAME ?? id}
-                        onDelete={() => toggleRowSelected(false)}
-                      />
-                    )
-                  )}
-                />
-              </Stack>
-            )}
-          </Stack>
-        )}
-      </SplitPane>
-    </Stack>
+      {selectedRows?.length > 0 && (
+        <Stack overflow="auto" data-cy={'detail'}>
+          {selectedRows?.length === 1 ? (
+            <ZoneTabs id={selectedRows[0]?.values.ID} />
+          ) : (
+            <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+              <MultipleTags
+                limitTags={10}
+                tags={selectedRows?.map(
+                  ({ original, id, toggleRowSelected }) => (
+                    <Chip
+                      key={id}
+                      variant="text"
+                      label={original?.NAME ?? id}
+                      onDelete={() => toggleRowSelected(false)}
+                    />
+                  )
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </SplitPane>
  )
 }

--- a/src/fireedge/src/client/theme/defaults.js
+++ b/src/fireedge/src/client/theme/defaults.js
@ -408,7 +408,7 @@ export default (appTheme, mode = SCHEMES.DARK) => {
            textTransform: 'capitalize',
            fontSize: '1rem',
            '&.Mui-selected': {
-              color: secondary.main,
+              color: isDarkMode ? secondary.main : 'text.primary',
            },
          },
        },