From 5d758c8e6d39e8ceb7ba84459407b9dd93a50df0 Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <xxnerowingerxx@gmail.com>
Date: Sat, 16 Feb 2019 18:19:40 +0100
Subject: [PATCH] Fix text overflow

---
 app/src/components/ConnectionSetup/ConnectionSetup.tsx | 1 +
 app/src/components/ConnectionSetup/ProfileList.tsx     | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/src/components/ConnectionSetup/ConnectionSetup.tsx b/app/src/components/ConnectionSetup/ConnectionSetup.tsx
index b4aa10c..76121fb 100644
--- a/app/src/components/ConnectionSetup/ConnectionSetup.tsx
+++ b/app/src/components/ConnectionSetup/ConnectionSetup.tsx
@@ -83,6 +83,7 @@ const styles = (theme: Theme) => ({
     borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`,
     paddingTop: `${2 * theme.spacing.unit}px`,
     flex: 3,
+    overflow: 'hidden',
     backgroundColor: theme.palette.background.default,
     color: theme.palette.text.primary,
   },
diff --git a/app/src/components/ConnectionSetup/ProfileList.tsx b/app/src/components/ConnectionSetup/ProfileList.tsx
index 21c70a7..223158e 100644
--- a/app/src/components/ConnectionSetup/ProfileList.tsx
+++ b/app/src/components/ConnectionSetup/ProfileList.tsx
@@ -11,6 +11,7 @@ import {
   ListItem,
   ListItemText,
   ListSubheader,
+  Typography,
 } from '@material-ui/core'
 
 interface Props {
@@ -71,7 +72,9 @@ const connectionItemRenderer = (props: ConnectionItemProps) => {
       selected={props.selected}
       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>
   )
 }