From 8ac9ca3645e8bf6dace716814128218c8b3e72cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?= <fabio.moreira@yld.io>
Date: Fri, 25 May 2018 15:23:32 +0100
Subject: [PATCH] feat(instances): network section responive behaviour

---
 .../resource-widgets/src/network/index.js     | 67 +++++++++++++------
 1 file changed, 47 insertions(+), 20 deletions(-)

diff --git a/packages/resource-widgets/src/network/index.js b/packages/resource-widgets/src/network/index.js
index 4405035a..efbbc945 100644
--- a/packages/resource-widgets/src/network/index.js
+++ b/packages/resource-widgets/src/network/index.js
@@ -29,9 +29,12 @@ import {
   DataCenterIcon,
   PublicIcon,
   PrivateIcon,
-  ArrowIcon
+  ArrowIcon,
+  QueryBreakpoints
 } from 'joyent-ui-toolkit';
 
+const { SmallOnly, Medium } = QueryBreakpoints;
+
 const Box = styled.div`
   display: inline-block;
   background-color: ${props => props.theme.white};
@@ -138,7 +141,7 @@ export const Expanded = ({
             </CardHeaderMeta>
           </CardHeader>
           <CardOutlet>
-            <Padding all={5}>
+            <Padding all={{ mobile: 3, tablet: 5 }}>
               {description && (
                 <Margin bottom={3}>
                   <P>{description}</P>
@@ -175,25 +178,49 @@ export const Expanded = ({
                     </Flex>
                   </FlexItem>
                 </Margin>
-                {fabric ? (
-                  <Margin right={5}>
-                    <FlexItem>
-                      <Flex alignCenter>
-                        <FlexItem>
-                          <Margin right={1}>
-                            <InstanceCountIcon />
-                          </Margin>
-                        </FlexItem>
-                        <FlexItem>
-                          <P>{`${machines.length} instance${
-                            machines.length === 1 ? '' : 's'
-                          }`}</P>
-                        </FlexItem>
-                      </Flex>
-                    </FlexItem>
-                  </Margin>
-                ) : null}
+                <Medium>
+                  {fabric ? (
+                    <Margin right={5}>
+                      <FlexItem>
+                        <Flex alignCenter>
+                          <FlexItem>
+                            <Margin right={1}>
+                              <InstanceCountIcon />
+                            </Margin>
+                          </FlexItem>
+                          <FlexItem>
+                            <P>{`${machines.length} instance${
+                              machines.length === 1 ? '' : 's'
+                            }`}</P>
+                          </FlexItem>
+                        </Flex>
+                      </FlexItem>
+                    </Margin>
+                  ) : null}
+                </Medium>
               </Flex>
+              <SmallOnly>
+                {fabric ? (
+                  <Flex>
+                    <Margin right={5}>
+                      <FlexItem>
+                        <Flex alignCenter>
+                          <FlexItem>
+                            <Margin right={1}>
+                              <InstanceCountIcon />
+                            </Margin>
+                          </FlexItem>
+                          <FlexItem>
+                            <P>{`${machines.length} instance${
+                              machines.length === 1 ? '' : 's'
+                            }`}</P>
+                          </FlexItem>
+                        </Flex>
+                      </FlexItem>
+                    </Margin>
+                  </Flex>
+                ) : null}
+              </SmallOnly>
               {fabric ? (
                 <Fragment>
                   <Margin top={3}>