18128: Improves toggle button bar's alignment & separation.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>

diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index ff1680b0f8ee493493e2e4411548a03ea88292f2..8b38e6c631baa7ea40278025d47a50c594fe448f 100644 (file)
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -16,7 +16,7 @@ type CssRules = 'button' | 'buttonIcon';
 const styles: StyleRulesCallback<CssRules> = theme => ({
     button: {
         padding: '2px 5px',
-        marginRight: '2px',
+        marginRight: '5px',
     },
     buttonIcon: {
         boxShadow: 'none',
@@ -123,7 +123,9 @@ const MPVContainerComponent = ({children, panelNames, classes, ...props}: MPVCon
     };
 
     return <Grid container {...props}>
-        { toggles }
+        <Grid item>
+            { toggles }
+        </Grid>
         { panelVisibility.includes(true)
             ? panels
             : <Grid container alignItems='center' justify='center'>