19504: Add spacing between breadcrumbs and mpv buttons, allow breadcrumbs to wrap

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
index 626573962425125fc14f7adf859d80f506c0b189..301f3041f1c0dca08708eef219c921b85760623f 100644 (file)
--- a/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -63,7 +63,7 @@ export interface BreadcrumbsProps {
 
 export const Breadcrumbs = withStyles(styles)(
     ({ classes, onClick, onContextMenu, items, resources }: BreadcrumbsProps & WithStyles<CssRules>) =>
-    <Grid container data-cy='breadcrumbs' alignItems="center" wrap="nowrap">
+    <Grid container data-cy='breadcrumbs' alignItems="center">
     {
         items.map((item, index) => {
             const isLastItem = index === items.length - 1;

diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index 877061de37f567bc6a3824451cb2f6951d8a8e99..203748d5e0b2c73ff6241b100718f2c01f5e68b2 100644 (file)
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -19,9 +19,12 @@ import { InfoIcon } from 'components/icon/icon';
 import { ReactNodeArray } from 'prop-types';
 import classNames from 'classnames';
 
-type CssRules = 'button' | 'buttonIcon' | 'content';
+type CssRules = 'root' | 'button' | 'buttonIcon' | 'content';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
+    root: {
+        marginTop: '10px',
+    },
     button: {
         padding: '2px 5px',
         marginRight: '5px',
@@ -206,7 +209,7 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
         };
     };
 
-    return <Grid container {...props}>
+    return <Grid container {...props} className={classes.root}>
         <Grid container item direction="row">
             { buttons.map((tgl, idx) => <Grid item key={idx}>{tgl}</Grid>) }
         </Grid>
@@ -221,4 +224,4 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
     </Grid>;
 };
 
-export const MPVContainer = withStyles(styles)(MPVContainerComponent);
\ No newline at end of file
+export const MPVContainer = withStyles(styles)(MPVContainerComponent);

diff --git a/src/views-components/main-content-bar/main-content-bar.tsx b/src/views-components/main-content-bar/main-content-bar.tsx
index 271d77c1085319854c8edec9d887ff0968bc233c..5c1bec903096a5e6d7a18f28f85daf793d479d0f 100644 (file)
--- a/src/views-components/main-content-bar/main-content-bar.tsx
+++ b/src/views-components/main-content-bar/main-content-bar.tsx
@@ -15,9 +15,12 @@ import RefreshButton from "components/refresh-button/refresh-button";
 import { loadSidePanelTreeProjects } from "store/side-panel-tree/side-panel-tree-actions";
 import { Dispatch } from "redux";
 
-type CssRules = "infoTooltip";
+type CssRules = 'mainBar' | 'infoTooltip';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
+    mainBar: {
+        flexWrap: 'nowrap',
+    },
     infoTooltip: {
         marginTop: '-10px',
         marginLeft: '10px',
@@ -61,7 +64,7 @@ const mapDispatchToProps = () => (dispatch: Dispatch) => ({
 
 export const MainContentBar = connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(
     (props: MainContentBarProps & WithStyles<CssRules> & any) =>
-        <Toolbar><Grid container>
+        <Toolbar><Grid container className={props.classes.mainBar}>
             <Grid container item xs alignItems="center">
                 <Breadcrumbs />
             </Grid>