Fix text overflow
This commit is contained in:
@@ -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,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user