From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Thu, 14 Oct 2021 17:54:28 +0000 (-0300)
Subject: 18128: Improves toggle button bar's alignment & separation.
X-Git-Tag: 2.4.0~25^2~16
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/8efd02a6af777d05429eed7233ea2f43eb859b94

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 ff1680b0..8b38e6c6 100644
--- 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'>