From f23c2386fe8fc9ad7ab9d4313971c6546d17f266 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?= <fabio.moreira@yld.io>
Date: Wed, 23 May 2018 16:52:22 +0100
Subject: [PATCH] feat(instances): adjust cards padding for xs screens

---
 packages/resource-step/src/index.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/resource-step/src/index.js b/packages/resource-step/src/index.js
index 500fc417..79c5ea90 100644
--- a/packages/resource-step/src/index.js
+++ b/packages/resource-step/src/index.js
@@ -21,7 +21,7 @@ import { Saved as SavedIcon, Error as ErrorIcon } from './status-icon';
 
 import { QueryBreakpoints } from 'joyent-ui-toolkit';
 
-const { Medium } = QueryBreakpoints;
+const { SmallOnly, Medium } = QueryBreakpoints;
 
 const Card = styled(BaseCard)`
   ${is('error')`
@@ -176,7 +176,12 @@ export default class Step extends PureComponent {
       >
         <Card expanded={expanded} error={!expanded && !isValid}>
           <CardOutlet>
-            <Padding all="5">{children}</Padding>
+            <SmallOnly>
+              <Padding all="3">{children}</Padding>
+            </SmallOnly>
+            <Medium>
+              <Padding all="5">{children}</Padding>
+            </Medium>
           </CardOutlet>
         </Card>
       </Broadcast>