From 1cfbae641570d0cbc96f8b38a34b38233ca1841a Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Tue, 8 Jan 2019 15:20:16 +0100
Subject: [PATCH] fix device status overflow

---
 src/components/DeviceHeader/index.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js
index 079f9744..cdce9e46 100644
--- a/src/components/DeviceHeader/index.js
+++ b/src/components/DeviceHeader/index.js
@@ -48,8 +48,9 @@ const ClickWrapper = styled.div`
 `;
 
 const LabelWrapper = styled.div`
-    flex: 1;
+    flex: 1 1 auto;
     padding-left: 18px;
+    overflow: hidden;
 `;
 
 const Name = styled.div`
@@ -73,6 +74,8 @@ const Status = styled.div`
 const IconWrapper = styled.div`
     padding-right: 25px;
     display: flex;
+    flex: 1 0 0;
+    justify-content: flex-end;
 `;
 
 const ImageWrapper = styled.div`
@@ -122,7 +125,7 @@ const DeviceHeader = ({
                 </ImageWrapper>
                 <LabelWrapper>
                     <Name>{device.instanceLabel}</Name>
-                    <Status>{getStatusName(status)}</Status>
+                    <Status title={getStatusName(status)}>{getStatusName(status)}</Status>
                 </LabelWrapper>
                 <IconWrapper>
                     {icon && !disabled && isAccessible && icon}