18128: Makes the toggle button bar always visible.

In case there's vertical scrolling involved, the button bar will always
be accessible.

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 e0698750610ad58b51236836c062fbbdeb4c83a4..6778b526d5de94d6a37748be12130341f6e2bf66 100644 (file)
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -11,7 +11,7 @@ import { InfoIcon, InvisibleIcon, VisibleIcon } from 'components/icon/icon';
 import { ReactNodeArray } from 'prop-types';
 import classNames from 'classnames';
 
-type CssRules = 'button' | 'buttonIcon';
+type CssRules = 'button' | 'buttonIcon' | 'content';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     button: {
@@ -23,6 +23,9 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
         padding: '2px 0px 2px 5px',
         fontSize: '1rem'
     },
+    content: {
+        overflow: 'auto',
+    },
 });
 
 interface MPVHideablePanelDataProps {
@@ -150,11 +153,13 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
         <Grid container item direction="row">
             { toggles.map(tgl => <Grid item>{tgl}</Grid>) }
         </Grid>
-        { panelVisibility.includes(true)
-            ? panels
-            : <Grid container item alignItems='center' justify='center'>
-                <DefaultView messages={["All panels are hidden.", "Click on the buttons above to show them."]} icon={InfoIcon} />
-            </Grid> }
+        <Grid container item {...props} xs className={classes.content}>
+            { panelVisibility.includes(true)
+                ? panels
+                : <Grid container item alignItems='center' justify='center'>
+                    <DefaultView messages={["All panels are hidden.", "Click on the buttons above to show them."]} icon={InfoIcon} />
+                </Grid> }
+        </Grid>
     </Grid>;
 };