Fix text overflow

This commit is contained in:
Thomas Nordquist
2019-02-16 18:19:40 +01:00
parent ef6946bdd4
commit 5d758c8e6d
2 changed files with 5 additions and 1 deletions

View File

@@ -83,6 +83,7 @@ const styles = (theme: Theme) => ({
borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`, borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`,
paddingTop: `${2 * theme.spacing.unit}px`, paddingTop: `${2 * theme.spacing.unit}px`,
flex: 3, flex: 3,
overflow: 'hidden',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
}, },

View File

@@ -11,6 +11,7 @@ import {
ListItem, ListItem,
ListItemText, ListItemText,
ListSubheader, ListSubheader,
Typography,
} from '@material-ui/core' } from '@material-ui/core'
interface Props { interface Props {
@@ -71,7 +72,9 @@ const connectionItemRenderer = (props: ConnectionItemProps) => {
selected={props.selected} selected={props.selected}
onClick={() => props.actions.selectConnection(props.connection.id)} onClick={() => props.actions.selectConnection(props.connection.id)}
> >
<ListItemText primary={props.connection.name} /> <Typography style={{ width: '100%', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden'}}>
{props.connection.name || 'mqtt broker'}
</Typography>
</ListItem> </ListItem>
) )
} }