uuid: string;
}
-type CssRules = "item" | "label" | "icon" | "frozenIcon";
+type CssRules = "item" | "label" | "buttonLabel" | "icon" | "frozenIcon";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
item: {
borderRadius: '16px',
height: '32px',
+ minWidth: '36px',
color: theme.customs.colors.grey700,
'&.parentItem': {
color: `${theme.palette.primary.main}`,
paddingLeft: '3px',
lineHeight: '1.4',
},
+ buttonLabel: {
+ overflow: 'hidden',
+ justifyContent: 'flex-start',
+ },
icon: {
fontSize: 20,
color: grey["600"],
export const Breadcrumbs = withStyles(styles)(
({ classes, onClick, onContextMenu, items, resources }: BreadcrumbsProps & WithStyles<CssRules>) =>
- <Grid container data-cy='breadcrumbs' alignItems="center">
+ <Grid container data-cy='breadcrumbs' alignItems="center" wrap="nowrap">
{
items.map((item, index) => {
const isLastItem = index === items.length - 1;
isLastItem ? null : 'parentItem',
classes.item
)}
+ classes={{
+ label: classes.buttonLabel
+ }}
color="inherit"
onClick={() => onClick(item)}
onContextMenu={event => onContextMenu(event, item)}>
import { loadSidePanelTreeProjects } from "store/side-panel-tree/side-panel-tree-actions";
import { Dispatch } from "redux";
-type CssRules = 'mainBar' | 'infoTooltip';
+type CssRules = 'mainBar' | 'breadcrumbContainer' | 'infoTooltip';
const styles: StyleRulesCallback<CssRules> = theme => ({
mainBar: {
flexWrap: 'nowrap',
},
+ breadcrumbContainer: {
+ overflow: 'hidden',
+ },
infoTooltip: {
marginTop: '-10px',
marginLeft: '10px',
export const MainContentBar = connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(
(props: MainContentBarProps & WithStyles<CssRules> & any) =>
<Toolbar><Grid container className={props.classes.mainBar}>
- <Grid container item xs alignItems="center">
+ <Grid container item xs alignItems="center" className={props.classes.breadcrumbContainer}>
<Breadcrumbs />
</Grid>
<Grid item>