From 7e8bf570b80dfeb27fc952487910e91206d5eaff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?= <fabio.moreira@yld.io>
Date: Wed, 23 May 2018 15:16:15 +0100
Subject: [PATCH] feat(instances): responsive layout for instance name card

---
 packages/instance-steps/src/name/index.js | 77 ++++++++++++++++-------
 1 file changed, 54 insertions(+), 23 deletions(-)

diff --git a/packages/instance-steps/src/name/index.js b/packages/instance-steps/src/name/index.js
index bcb576c8..c998c5ad 100644
--- a/packages/instance-steps/src/name/index.js
+++ b/packages/instance-steps/src/name/index.js
@@ -33,6 +33,9 @@ import {
 import GetRandomName from '../graphql/get-random-name.gql';
 import { Forms, Values } from '../constants';
 import { instanceName as validateName } from '../validators';
+import { QueryBreakpoints } from 'joyent-ui-toolkit';
+
+const { SmallOnly, Medium } = QueryBreakpoints;
 
 const { IR_NAME_F } = Forms;
 const { IR_NAME_V_USE_RANDOM } = Values;
@@ -87,29 +90,57 @@ const Name = ({
                 <FormGroup id={'input-name'} name="name" fluid field={Field}>
                   <FormLabel>Instance name</FormLabel>
                   <Margin top="0.5">
-                    <Flex>
-                      <FlexItem>
-                        <Input onBlur={null} />
-                      </FlexItem>
-                      <FlexItem>
-                        <Margin left="1" inline>
-                          <Button
-                            id={'randomize-button-name'}
-                            type="button"
-                            loading={randomizing}
-                            onClick={handleRandomize}
-                            marginless
-                            secondary
-                            icon
-                          >
-                            <Margin right="1">
-                              <RandomizeIcon />
-                            </Margin>
-                            Randomize
-                          </Button>
-                        </Margin>
-                      </FlexItem>
-                    </Flex>
+                    <SmallOnly>
+                      <Flex column>
+                        <FlexItem>
+                          <Input onBlur={null} fluid />
+                        </FlexItem>
+                        <FlexItem>
+                          <Margin top="2">
+                            <Button
+                              id={'randomize-button-name'}
+                              type="button"
+                              loading={randomizing}
+                              onClick={handleRandomize}
+                              marginless
+                              secondary
+                              icon
+                              fluid
+                            >
+                              <Margin right="1">
+                                <RandomizeIcon />
+                              </Margin>
+                              Randomize
+                            </Button>
+                          </Margin>
+                        </FlexItem>
+                      </Flex>
+                    </SmallOnly>
+                    <Medium>
+                      <Flex>
+                        <FlexItem>
+                          <Input onBlur={null} />
+                        </FlexItem>
+                        <FlexItem>
+                          <Margin left="1" inline>
+                            <Button
+                              id={'randomize-button-name'}
+                              type="button"
+                              loading={randomizing}
+                              onClick={handleRandomize}
+                              marginless
+                              secondary
+                              icon
+                            >
+                              <Margin right="1">
+                                <RandomizeIcon />
+                              </Margin>
+                              Randomize
+                            </Button>
+                          </Margin>
+                        </FlexItem>
+                      </Flex>
+                    </Medium>
                   </Margin>
                   <FormMeta />
                 </FormGroup>