From: Stephen Smith <stephen@curii.com>
Date: Tue, 29 Nov 2022 15:07:43 +0000 (-0500)
Subject: 19504: Add spacing between breadcrumbs and mpv buttons, allow breadcrumbs to wrap
X-Git-Tag: 2.5.0~13^2~5
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/411849b41dc04bfdfb232d6bb20389901459eaba

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 62657396..301f3041 100644
--- 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 877061de..203748d5 100644
--- 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 271d77c1..5c1bec90 100644
--- 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>