Polish the DeviceInteraction error style

src/components/DeviceInteraction/components.js

@@ -100,12 +100,21 @@ export const ErrorDescContainer = ({
   error: Error,
   onRetry: void => void,
 }) => (
-  <Box horizontal fontSize={3} color="alertRed" align="center" cursor="text" {...p}>
+  <Box
+    horizontal
+    fontSize={3}
+    color="alertRed"
+    align="center"
+    cursor="text"
+    ff="Open Sans|SemiBold"
+    style={{ maxWidth: 500 }}
+    {...p}
+  >
     <IconExclamationCircle size={16} />
-    <Box ml={1}>
+    <Box ml={2} mr={1} shrink grow style={{ maxWidth: 300 }}>
       <TranslatedError error={error} />
     </Box>
-    <FakeLink ml={1} underline color="alertRed" onClick={onRetry}>
+    <FakeLink ml="auto" underline color="alertRed" onClick={onRetry}>
       {'Retry'}
     </FakeLink>
   </Box>

src/components/DeviceInteraction/index.js

@@ -107,7 +107,7 @@ class DeviceInteraction extends PureComponent<Props, State> {
           )
         })}
         {error &&
-          shouldRenderRetry && <ErrorDescContainer error={error} onRetry={this.reset} mt={2} />}
+          shouldRenderRetry && <ErrorDescContainer error={error} onRetry={this.reset} mt={4} />}
       </Box>
     )
   }

src/components/DeviceInteraction/stories.js

@@ -34,6 +34,7 @@ class Wrapper extends React.Component<any> {
           {'reset'}
         </button>
         <DeviceInteraction
+          shouldRenderRetry
           ref={n => (this._ref = n)}
           steps={[
             {