Style the workspace sidebar with flexbox

src/components/WorkspaceAddButton.js

@@ -4,6 +4,11 @@ import Fab from '@mui/material/Fab';
 import Tooltip from '@mui/material/Tooltip';
 import AddIcon from '@mui/icons-material/AddSharp';
 import CloseIcon from '@mui/icons-material/CloseSharp';
+import { styled } from '@mui/material/styles';
+
+const Root = styled(Fab, { name: 'WorkspaceAddButton', slot: 'root' })(({ theme }) => ({
+  marginBottom: theme.spacing(1),
+}));
 
 /**
  */
@@ -18,7 +23,7 @@ export class WorkspaceAddButton extends Component {
     } = this.props;
     return (
       <Tooltip title={isWorkspaceAddVisible ? t('closeAddResourceMenu') : t('addResource')}>
-        <Fab
+        <Root
           size="medium"
           color="primary"
           id="addBtn"
@@ -27,9 +32,6 @@ export class WorkspaceAddButton extends Component {
               ? t('closeAddResourceMenu')
               : ((useExtendedFab && t('startHere')) || t('addResource'))
           }
-          sx={{
-            margin: 1,
-          }}
           variant={useExtendedFab ? 'extended' : 'circular'}
           onClick={() => { setWorkspaceAddVisibility(!isWorkspaceAddVisible); }}
         >
@@ -39,7 +41,7 @@ export class WorkspaceAddButton extends Component {
               : <AddIcon />
           }
           { useExtendedFab && t('startHere') }
-        </Fab>
+        </Root>
       </Tooltip>
     );
   }

src/components/WorkspaceControlPanel.js

@@ -10,7 +10,10 @@ import Branding from '../containers/Branding';
 import ns from '../config/css-ns';
 
 const Root = styled(AppBar, { name: 'WorkspaceControlPanel', slot: 'root' })(({ ownerState, theme }) => ({
+  display: 'flex',
   height: 64,
+  padding: theme.spacing(1),
+  paddingBottom: 0,
   [theme.breakpoints.up('sm')]: {
     height: '100%',
     left: 0,
@@ -24,6 +27,7 @@ const Root = styled(AppBar, { name: 'WorkspaceControlPanel', slot: 'root' })(({
 
 const StyledToolbar = styled(Toolbar, { name: 'WorkspaceControlPanel', slot: 'toolbar' })(({ theme }) => ({
   display: 'flex',
+  flexGrow: 1,
   justifyContent: 'space-between',
   [theme.breakpoints.up('sm')]: {
     flexDirection: 'column',
@@ -44,18 +48,13 @@ const StyledWorkspaceButtons = styled('div', { name: 'WorkspaceControlPanel', sl
 
 const StyledBranding = styled(Branding, { name: 'WorkspaceControlPanel', slot: 'branding' })(({ theme }) => ({
   display: 'flex',
-  position: 'absolute',
+  justifyContent: 'center',
   [theme.breakpoints.up('xs')]: {
     display: 'none',
   },
   [theme.breakpoints.up('sm')]: {
-    bottom: 0,
-    display: 'block',
-    float: 'none',
-    right: 'auto',
-    width: '100%',
+    display: 'flex',
   },
-  right: 0,
 }));
 
 /**