From b66f761a9e6bfe5dbd1475f54599d23408f25060 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?= <fabiommmoreira@gmail.com>
Date: Wed, 23 May 2018 12:41:40 +0100
Subject: [PATCH] #1406 - implement responsive rules on create instance (#1432)

* fix(instances): swap absolute media query value for defined breakpoint

* feat(ui-toolkit): update breakpoints

* feat(ui-toolkit): view container padding and max width

* feat(ui-toolkit): responsive image selector

* fix(ui-toolkit): delay parallax header hiding

* feat(instances): responsive rules for package selection

* test(instances): update snapshots

* fix(instances): use color variables on package card

* fix(instances): import breakpoints from ui-toolkit

* feat(instances): package selection for mobile or desktop version

* feat(instances): remove unnecessary col css props

* test(instances): update snapshots

* test(instances): update resource widgets snaphots
---
 .../my-joy-images/src/components/summary.js   |   3 +-
 .../__tests__/__snapshots__/menu.spec.js.snap |  22 +-
 .../__tests__/__snapshots__/list.spec.js.snap |  50 ++-
 .../__snapshots__/snapshots.spec.js.snap      |  26 +-
 .../__snapshots__/summary.spec.js.snap        |  42 +--
 .../src/components/instances/summary.js       |   3 +-
 .../__tests__/__snapshots__/cns.spec.js.snap  | 198 +++++++++--
 .../__snapshots__/firewall.spec.js.snap       | 320 ++++++++++++++----
 .../__tests__/__snapshots__/list.spec.js.snap | 314 ++++++++++++-----
 .../__snapshots__/metadata.spec.js.snap       | 110 ++++--
 .../__snapshots__/networks.spec.js.snap       |  88 ++++-
 .../__snapshots__/summary.spec.js.snap        | 166 +++++++--
 .../__tests__/__snapshots__/tags.spec.js.snap | 176 ++++++++--
 .../__snapshots__/breadcrumb.spec.js.snap     |  44 ++-
 .../src/components/header.js                  |   2 +-
 .../instance-steps/src/image/components.js    |  18 +-
 .../instance-steps/src/package/components.js  | 175 +++++++++-
 packages/instance-steps/src/package/index.js  |  46 ++-
 packages/instance-steps/src/tags/index.js     |   2 +-
 .../__snapshots__/firewall.spec.js.snap       |   3 -
 .../__snapshots__/network.spec.js.snap        |   6 -
 .../__snapshots__/index.spec.js.snap          |  22 +-
 .../ui-toolkit/src/breakpoints/screens.js     |  18 +-
 .../__tests__/__snapshots__/form.spec.js.snap |   2 -
 packages/ui-toolkit/src/form/base/toggle.js   |   1 -
 packages/ui-toolkit/src/index.js              |   3 +-
 .../__snapshots__/layout.spec.js.snap         |  66 +++-
 .../src/layout/__tests__/layout.spec.js       |   2 +-
 .../ui-toolkit/src/layout/view-container.js   |  16 +-
 .../ui-toolkit/src/styleguide/parallax.js     |   6 +-
 30 files changed, 1508 insertions(+), 442 deletions(-)

diff --git a/consoles/my-joy-images/src/components/summary.js b/consoles/my-joy-images/src/components/summary.js
index 448ad799..3f659d77 100644
--- a/consoles/my-joy-images/src/components/summary.js
+++ b/consoles/my-joy-images/src/components/summary.js
@@ -6,6 +6,7 @@ import Flex, { FlexItem } from 'styled-flex-component';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import titleCase from 'title-case';
 import remcalc from 'remcalc';
+import { ValueBreakpoints as breakpoints } from 'joyent-ui-toolkit';
 
 import {
   Card,
@@ -37,7 +38,7 @@ const VerticalDivider = styled.div`
   align-self: flex-end;
   margin: 0 ${remcalc(18)};
 
-  @media (max-width: ${remcalc(767)}) {
+  @media (max-width: ${remcalc(breakpoints.small.upper)}) {
     display: none;
   }
 `;
diff --git a/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap b/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap
index f86182a6..16944213 100644
--- a/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap
@@ -36,7 +36,7 @@ exports[`renders <Menu links /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 .c4 {
@@ -113,10 +113,24 @@ exports[`renders <Menu links /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
index 917ca89f..90a13f9c 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -94,7 +94,6 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -483,14 +482,14 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   margin: 0 0.1875rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 8.125rem;
     display: table-cell;
@@ -812,7 +811,6 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -1201,14 +1199,14 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   margin: 0 0.1875rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 8.125rem;
     display: table-cell;
@@ -1530,7 +1528,6 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -1919,14 +1916,14 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   margin: 0 0.1875rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 8.125rem;
     display: table-cell;
@@ -2248,7 +2245,6 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -2637,14 +2633,14 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   margin: 0 0.1875rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 8.125rem;
     display: table-cell;
@@ -2966,7 +2962,6 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -3355,14 +3350,14 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   margin: 0 0.1875rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 8.125rem;
     display: table-cell;
@@ -3684,7 +3679,6 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -4073,14 +4067,14 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   margin: 0 0.1875rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 8.125rem;
     display: table-cell;
@@ -4452,7 +4446,6 @@ exports[`renders <Item /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -4679,14 +4672,14 @@ exports[`renders <Item /> without throwing 1`] = `
   height: 3rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c14 {
     width: 8.125rem;
     display: table-cell;
@@ -4980,7 +4973,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -5207,14 +5199,14 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   height: 3rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c14 {
     width: 8.125rem;
     display: table-cell;
@@ -5510,7 +5502,6 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -5737,14 +5728,14 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   height: 3rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c13 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c14 {
     width: 8.125rem;
     display: table-cell;
@@ -6027,7 +6018,6 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -6252,14 +6242,14 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   display: block;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c16 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c17 {
     width: 8.125rem;
     display: table-cell;
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
index c3fd585d..ef7a5794 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
@@ -75,7 +75,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -360,7 +359,7 @@ Array [
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
@@ -976,7 +975,6 @@ exports[`renders <Item /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -1150,7 +1148,7 @@ exports[`renders <Item /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c9 {
     width: 10rem;
     display: table-cell;
@@ -1371,7 +1369,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -1545,7 +1542,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c9 {
     width: 10rem;
     display: table-cell;
@@ -1625,7 +1622,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
     name="td"
     selected={undefined}
   >
-    5 months
+    6 months
   </td>
   <td
     className="c10"
@@ -1967,7 +1964,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -2252,7 +2248,7 @@ Array [
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
@@ -2842,7 +2838,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -3127,7 +3122,7 @@ Array [
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
@@ -3717,7 +3712,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -4002,7 +3996,7 @@ Array [
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
@@ -4592,7 +4586,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -4877,7 +4870,7 @@ Array [
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
@@ -5467,7 +5460,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -5752,7 +5744,7 @@ Array [
   border-bottom-width: 0.0625rem;
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c12 {
     width: 10rem;
     display: table-cell;
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
index 7d8b0f06..12c14724 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -1247,7 +1247,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   }
 }
 
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
   .c17 {
     display: none;
   }
@@ -1509,7 +1509,7 @@ exports[`renders <Summary /> without throwing 1`] = `
               >
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (max-width: 47.9375rem)"
+                  query="only screen and (max-width: 37.4375rem)"
                 >
                   <button
                     className="c40 c28 c29 c30"
@@ -1544,7 +1544,7 @@ exports[`renders <Summary /> without throwing 1`] = `
                 </span>
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (min-width: 48rem)"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <button
                     className="c41 c28 c29 c30"
@@ -2857,7 +2857,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   }
 }
 
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
   .c17 {
     display: none;
   }
@@ -3121,7 +3121,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
               >
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (max-width: 47.9375rem)"
+                  query="only screen and (max-width: 37.4375rem)"
                 >
                   <button
                     className="c39 c28 c29 c30"
@@ -3156,7 +3156,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
                 </span>
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (min-width: 48rem)"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <button
                     className="c40 c28 c29 c30"
@@ -4784,7 +4784,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   }
 }
 
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
   .c17 {
     display: none;
   }
@@ -5048,7 +5048,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
               >
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (max-width: 47.9375rem)"
+                  query="only screen and (max-width: 37.4375rem)"
                 >
                   <button
                     className="c39 c28 c29 c30"
@@ -5083,7 +5083,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
                 </span>
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (min-width: 48rem)"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <button
                     className="c40 c28 c29 c30"
@@ -6992,7 +6992,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   }
 }
 
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
   .c17 {
     display: none;
   }
@@ -7261,7 +7261,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
               >
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (max-width: 47.9375rem)"
+                  query="only screen and (max-width: 37.4375rem)"
                 >
                   <button
                     className="c43 c28 c29 c30"
@@ -7306,7 +7306,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
                 </span>
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (min-width: 48rem)"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <button
                     className="c44 c28 c29 c30"
@@ -8705,7 +8705,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   }
 }
 
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
   .c17 {
     display: none;
   }
@@ -8967,7 +8967,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
               >
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (max-width: 47.9375rem)"
+                  query="only screen and (max-width: 37.4375rem)"
                 >
                   <button
                     className="c39 c28 c29 c30"
@@ -9002,7 +9002,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
                 </span>
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (min-width: 48rem)"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <button
                     className="c40 c28 c29 c30"
@@ -10394,7 +10394,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   }
 }
 
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
   .c17 {
     display: none;
   }
@@ -10656,7 +10656,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
               >
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (max-width: 47.9375rem)"
+                  query="only screen and (max-width: 37.4375rem)"
                 >
                   <button
                     className="c39 c28 c29 c30"
@@ -10691,7 +10691,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
                 </span>
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (min-width: 48rem)"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <button
                     className="c40 c28 c29 c30"
@@ -12245,7 +12245,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   }
 }
 
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
   .c17 {
     display: none;
   }
@@ -12507,7 +12507,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
               >
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (max-width: 47.9375rem)"
+                  query="only screen and (max-width: 37.4375rem)"
                 >
                   <button
                     className="c40 c28 c29 c30"
@@ -12542,7 +12542,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
                 </span>
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (min-width: 48rem)"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <button
                     className="c41 c28 c29 c30"
diff --git a/consoles/my-joy-instances/src/components/instances/summary.js b/consoles/my-joy-instances/src/components/instances/summary.js
index 437af25a..87432697 100644
--- a/consoles/my-joy-instances/src/components/instances/summary.js
+++ b/consoles/my-joy-instances/src/components/instances/summary.js
@@ -8,6 +8,7 @@ import titleCase from 'title-case';
 import get from 'lodash.get';
 import remcalc from 'remcalc';
 import { Field } from 'redux-form';
+import { ValueBreakpoints as breakpoints } from 'joyent-ui-toolkit';
 
 import {
   Card,
@@ -71,7 +72,7 @@ const VerticalDivider = styled.div`
   align-self: flex-end;
   margin: 0 ${remcalc(12)};
 
-  @media (max-width: ${remcalc(767)}) {
+  @media (max-width: ${remcalc(breakpoints.small.upper)}) {
     display: none;
   }
 `;
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
index c4b0f25e..d1b4b1a8 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
@@ -203,7 +203,7 @@ exports[`renders <Cns /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -633,10 +633,24 @@ exports[`renders <Cns /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -954,7 +968,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1206,10 +1220,24 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -1566,7 +1594,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -2152,10 +2180,24 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -3169,7 +3211,7 @@ exports[`renders <Cns loading /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3278,10 +3320,24 @@ exports[`renders <Cns loading /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -3574,7 +3630,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3916,10 +3972,24 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -4361,7 +4431,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -5044,10 +5114,24 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -6197,7 +6281,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -6664,10 +6748,24 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -7141,7 +7239,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -7616,10 +7714,24 @@ exports[`renders <Cns services /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -8045,7 +8157,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -8297,10 +8409,24 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
index ca712401..90c16d44 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
@@ -189,7 +189,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -256,7 +256,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -412,10 +411,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -1019,7 +1032,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1086,7 +1099,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -1242,10 +1254,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -1911,7 +1937,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1978,7 +2004,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -2134,10 +2159,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -2741,7 +2780,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -2808,7 +2847,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -2964,10 +3002,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -3586,7 +3638,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3630,10 +3682,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -3851,7 +3917,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3895,10 +3961,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -4171,7 +4251,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -4275,7 +4355,6 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -4431,10 +4510,24 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -5070,7 +5163,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -5174,7 +5267,6 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -5330,10 +5422,24 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -5923,7 +6029,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -5960,7 +6066,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -6107,10 +6212,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -6359,7 +6478,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -6396,7 +6515,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -6543,10 +6661,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -6897,7 +7029,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -6975,7 +7107,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -7174,10 +7305,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -7728,7 +7873,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -7765,7 +7910,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -7912,10 +8056,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -8164,7 +8322,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -8201,7 +8359,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -8348,10 +8505,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -8702,7 +8873,7 @@ Array [
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -8780,7 +8951,6 @@ Array [
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -8979,10 +9149,24 @@ Array [
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
index 5b705666..dbea2bca 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -156,7 +156,7 @@ exports[`renders <List /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -267,7 +267,6 @@ exports[`renders <List /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -682,21 +681,35 @@ exports[`renders <List /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (min-width:37.4375rem) {
   .c25 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c26 {
     width: 8.125rem;
     display: table-cell;
@@ -1094,7 +1107,7 @@ exports[`renders <List error /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1242,7 +1255,6 @@ exports[`renders <List error /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -1657,21 +1669,35 @@ exports[`renders <List error /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (min-width:37.4375rem) {
   .c32 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c33 {
     width: 8.125rem;
     display: table-cell;
@@ -2127,7 +2153,7 @@ exports[`renders <List instances /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -2228,7 +2254,6 @@ exports[`renders <List instances /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -2838,35 +2863,49 @@ exports[`renders <List instances /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (min-width:37.4375rem) {
   .c25 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c26 {
     width: 8.125rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c34 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c35 {
     width: 8.125rem;
     display: table-cell;
@@ -4235,14 +4274,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
 .c51 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 .c3 {
@@ -4412,7 +4451,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -5058,42 +5096,70 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (max-width:37.4375rem) {
   .c51 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c51 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c51 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (min-width:37.4375rem) {
   .c25 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c26 {
     width: 8.125rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c34 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c35 {
     width: 8.125rem;
     display: table-cell;
@@ -5681,7 +5747,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           >
             <span
               name="react-responsive-mock"
-              query="only screen and (max-width: 47.9375rem)"
+              query="only screen and (max-width: 37.4375rem)"
             >
               <button
                 className="c55 c13 c56 c57"
@@ -5715,7 +5781,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             >
               <span
                 name="react-responsive-mock"
-                query="only screen and (min-width: 48rem)"
+                query="only screen and (min-width: 37.5rem)"
               >
                 <button
                   className="c59 c13 c56 c57"
@@ -5754,7 +5820,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </div>
             <span
               name="react-responsive-mock"
-              query="only screen and (max-width: 47.9375rem)"
+              query="only screen and (max-width: 37.4375rem)"
             >
               <button
                 className="c55 c13 c56 c57"
@@ -5788,7 +5854,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             >
               <span
                 name="react-responsive-mock"
-                query="only screen and (min-width: 48rem)"
+                query="only screen and (min-width: 37.5rem)"
               >
                 <button
                   className="c59 c13 c56 c57"
@@ -5827,7 +5893,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </div>
             <span
               name="react-responsive-mock"
-              query="only screen and (max-width: 47.9375rem)"
+              query="only screen and (max-width: 37.4375rem)"
             >
               <button
                 className="c55 c13 c56 c57"
@@ -5877,7 +5943,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             >
               <span
                 name="react-responsive-mock"
-                query="only screen and (min-width: 48rem)"
+                query="only screen and (min-width: 37.5rem)"
               >
                 <button
                   className="c59 c13 c56 c57"
@@ -5933,7 +5999,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
         >
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c61 c13 c56 c57"
@@ -5964,7 +6030,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c62 c13 c56 c57"
@@ -6807,14 +6873,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
 .c51 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 .c3 {
@@ -6984,7 +7050,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -7630,42 +7695,70 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (max-width:37.4375rem) {
   .c51 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c51 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c51 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (min-width:37.4375rem) {
   .c25 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c26 {
     width: 8.125rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c34 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c35 {
     width: 8.125rem;
     display: table-cell;
@@ -8253,7 +8346,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           >
             <span
               name="react-responsive-mock"
-              query="only screen and (max-width: 47.9375rem)"
+              query="only screen and (max-width: 37.4375rem)"
             >
               <button
                 className="c55 c13 c56 c57"
@@ -8287,7 +8380,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             >
               <span
                 name="react-responsive-mock"
-                query="only screen and (min-width: 48rem)"
+                query="only screen and (min-width: 37.5rem)"
               >
                 <button
                   className="c59 c13 c56 c57"
@@ -8326,7 +8419,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </div>
             <span
               name="react-responsive-mock"
-              query="only screen and (max-width: 47.9375rem)"
+              query="only screen and (max-width: 37.4375rem)"
             >
               <button
                 className="c55 c13 c56 c57"
@@ -8360,7 +8453,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             >
               <span
                 name="react-responsive-mock"
-                query="only screen and (min-width: 48rem)"
+                query="only screen and (min-width: 37.5rem)"
               >
                 <button
                   className="c59 c13 c56 c57"
@@ -8399,7 +8492,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </div>
             <span
               name="react-responsive-mock"
-              query="only screen and (max-width: 47.9375rem)"
+              query="only screen and (max-width: 37.4375rem)"
             >
               <button
                 className="c55 c13 c56 c57"
@@ -8449,7 +8542,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             >
               <span
                 name="react-responsive-mock"
-                query="only screen and (min-width: 48rem)"
+                query="only screen and (min-width: 37.5rem)"
               >
                 <button
                   className="c59 c13 c56 c57"
@@ -8505,7 +8598,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
         >
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c61 c13 c56 c57"
@@ -8536,7 +8629,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c62 c13 c56 c57"
@@ -9574,14 +9667,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
 .c51 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 .c3 {
@@ -9751,7 +9844,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -10397,42 +10489,70 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (max-width:37.4375rem) {
   .c51 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c51 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c51 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media only screen and (min-width:37.4375rem) {
   .c25 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c26 {
     width: 8.125rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c34 {
     width: 10rem;
     display: table-cell;
   }
 }
 
-@media only screen and (min-width:47.9375rem) {
+@media only screen and (min-width:37.4375rem) {
   .c35 {
     width: 8.125rem;
     display: table-cell;
@@ -11020,7 +11140,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           >
             <span
               name="react-responsive-mock"
-              query="only screen and (max-width: 47.9375rem)"
+              query="only screen and (max-width: 37.4375rem)"
             >
               <button
                 className="c55 c13 c56 c57"
@@ -11054,7 +11174,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             >
               <span
                 name="react-responsive-mock"
-                query="only screen and (min-width: 48rem)"
+                query="only screen and (min-width: 37.5rem)"
               >
                 <button
                   className="c59 c13 c56 c57"
@@ -11093,7 +11213,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </div>
             <span
               name="react-responsive-mock"
-              query="only screen and (max-width: 47.9375rem)"
+              query="only screen and (max-width: 37.4375rem)"
             >
               <button
                 className="c60 c13 c56 c57"
@@ -11127,7 +11247,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             >
               <span
                 name="react-responsive-mock"
-                query="only screen and (min-width: 48rem)"
+                query="only screen and (min-width: 37.5rem)"
               >
                 <button
                   className="c61 c13 c56 c57"
@@ -11166,7 +11286,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </div>
             <span
               name="react-responsive-mock"
-              query="only screen and (max-width: 47.9375rem)"
+              query="only screen and (max-width: 37.4375rem)"
             >
               <button
                 className="c60 c13 c56 c57"
@@ -11216,7 +11336,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             >
               <span
                 name="react-responsive-mock"
-                query="only screen and (min-width: 48rem)"
+                query="only screen and (min-width: 37.5rem)"
               >
                 <button
                   className="c61 c13 c56 c57"
@@ -11272,7 +11392,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
         >
           <span
             name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
+            query="only screen and (max-width: 37.4375rem)"
           >
             <button
               className="c63 c13 c56 c57"
@@ -11303,7 +11423,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           </span>
           <span
             name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
+            query="only screen and (min-width: 37.5rem)"
           >
             <button
               className="c64 c13 c56 c57"
@@ -11539,7 +11659,7 @@ exports[`renders <List loading /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -11710,10 +11830,24 @@ exports[`renders <List loading /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
index 4d98dd3f..7f599c54 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -162,7 +162,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -323,10 +323,24 @@ exports[`renders <Metadata /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -942,7 +956,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1447,10 +1461,24 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -1921,7 +1949,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -2119,10 +2147,24 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -2475,7 +2517,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -2638,10 +2680,24 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -3469,7 +3525,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3989,10 +4045,24 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
index 5f183a05..c85186f8 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
@@ -57,7 +57,7 @@ exports[`renders <Networks /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -172,10 +172,24 @@ exports[`renders <Networks /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -580,7 +594,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -669,10 +683,24 @@ exports[`renders <Networks error /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -845,7 +873,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -897,10 +925,24 @@ exports[`renders <Networks loading /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -1063,7 +1105,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1415,10 +1457,24 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
index 966eab49..811f29c3 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -71,7 +71,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -114,10 +114,24 @@ exports[`renders <Summary /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -233,7 +247,7 @@ exports[`renders <Summary loading /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -276,10 +290,24 @@ exports[`renders <Summary loading /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -344,7 +372,7 @@ exports[`renders <Summary loadingError /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -403,10 +431,24 @@ exports[`renders <Summary loadingError /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -512,7 +554,7 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -592,10 +634,24 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -732,7 +788,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -775,10 +831,24 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -1515,7 +1585,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1860,14 +1930,28 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media (max-width:37.4375rem) {
   .c19 {
     display: none;
   }
@@ -2134,7 +2218,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
                 >
                   <span
                     name="react-responsive-mock"
-                    query="only screen and (max-width: 47.9375rem)"
+                    query="only screen and (max-width: 37.4375rem)"
                   >
                     <button
                       className="c41 c30 c31 c32"
@@ -2169,7 +2253,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
                   </span>
                   <span
                     name="react-responsive-mock"
-                    query="only screen and (min-width: 48rem)"
+                    query="only screen and (min-width: 37.5rem)"
                   >
                     <button
                       className="c42 c30 c31 c32"
@@ -3483,7 +3567,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3828,14 +3912,28 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media (max-width:37.4375rem) {
   .c19 {
     display: none;
   }
@@ -4102,7 +4200,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
                 >
                   <span
                     name="react-responsive-mock"
-                    query="only screen and (max-width: 47.9375rem)"
+                    query="only screen and (max-width: 37.4375rem)"
                   >
                     <button
                       className="c41 c30 c31 c32"
@@ -4137,7 +4235,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
                   </span>
                   <span
                     name="react-responsive-mock"
-                    query="only screen and (min-width: 48rem)"
+                    query="only screen and (min-width: 37.5rem)"
                   >
                     <button
                       className="c42 c30 c31 c32"
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
index 162e71f9..fa6824e8 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -162,7 +162,7 @@ exports[`renders <Tags /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -336,10 +336,24 @@ exports[`renders <Tags /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -959,7 +973,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1429,10 +1443,24 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -1876,7 +1904,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -2050,10 +2078,24 @@ exports[`renders <Tags editable /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -2695,7 +2737,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3176,10 +3218,24 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -4106,7 +4162,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -4587,10 +4643,24 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -5071,7 +5141,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -5245,10 +5315,24 @@ exports[`renders <Tags error /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -5557,7 +5641,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -5720,10 +5804,24 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -5993,7 +6091,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -6188,10 +6286,24 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap b/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
index b0eb8528..e5386bb2 100644
--- a/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
@@ -64,7 +64,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 .c4 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 .c10 {
@@ -138,10 +138,24 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c4 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c4 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c4 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -302,7 +316,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
 .c4 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 .c10 {
@@ -376,10 +390,24 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c4 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c4 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c4 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/consoles/my-joy-navigation/src/components/header.js b/consoles/my-joy-navigation/src/components/header.js
index e3a9c973..2fc957c3 100644
--- a/consoles/my-joy-navigation/src/components/header.js
+++ b/consoles/my-joy-navigation/src/components/header.js
@@ -4,7 +4,7 @@ import emotion from 'preact-emotion';
 import remcalc from 'remcalc';
 import outy from 'outy';
 
-import { breakpoints } from 'joyent-ui-toolkit/dist/es/breakpoints/screens';
+import { ValueBreakpoints as breakpoints } from 'joyent-ui-toolkit';
 
 export const Item = emotion('div')`
   order: 0;
diff --git a/packages/instance-steps/src/image/components.js b/packages/instance-steps/src/image/components.js
index 8d3d1881..4f6f4863 100644
--- a/packages/instance-steps/src/image/components.js
+++ b/packages/instance-steps/src/image/components.js
@@ -13,15 +13,22 @@ import * as Assets from 'joyent-logo-assets';
 import {
   H3,
   P,
-  FormGroup,
+  FormGroup as BaseFormGroup,
   SectionList as BaseSectionList,
   SectionListItem,
   SectionListAnchor,
   H4 as BaseH4,
   Select,
-  Card as BaseCard
+  Card as BaseCard,
+  StyledBreakpoints as breakpoints
 } from 'joyent-ui-toolkit';
 
+const imageColSize = {
+  small: 6,
+  medium: 4,
+  large: 3
+};
+
 const Version = styled(Select)`
   min-width: 100%;
   width: ${remcalc(144)};
@@ -40,6 +47,11 @@ const SectionList = styled(BaseSectionList)`
 
 const Card = styled(BaseCard)`
   border-bottom: 0;
+  width: 100%;
+`;
+
+const FormGroup = styled(BaseFormGroup)`
+  width: 100%;
 `;
 
 const H4 = styled(BaseH4)`
@@ -79,7 +91,7 @@ const Image = ({ onClick, active, ...image }) => {
   const Logo = Assets[pascalCase(imageName)] || Assets.Placeholder;
 
   return (
-    <Col md={2} sm={3}>
+    <Col lg={3} md={4} xs={6}>
       <Margin bottom={3}>
         <Card id={id} onClick={handleCardClick} active={active} preview>
           <Logo
diff --git a/packages/instance-steps/src/package/components.js b/packages/instance-steps/src/package/components.js
index 1ab3687c..d0491972 100644
--- a/packages/instance-steps/src/package/components.js
+++ b/packages/instance-steps/src/package/components.js
@@ -14,13 +14,13 @@ import {
   FormGroup,
   Card,
   Button,
-  TableTh,
+  TableTh as BaseTableTh,
   TableTr,
-  TableThead,
+  TableThead as BaseTableThead,
   Divider,
   TableTbody,
   Table,
-  TableTd,
+  TableTd as BaseTableTd,
   Radio,
   Checkbox,
   FormLabel,
@@ -30,6 +30,8 @@ import {
   MemoryIcon
 } from 'joyent-ui-toolkit';
 
+import { NoPackages } from 'joyent-logo-assets';
+import { ValueBreakpoints as breakpoints } from 'joyent-ui-toolkit';
 import { EmptyState } from 'joyent-icons';
 
 const GroupIcons = {
@@ -60,6 +62,67 @@ const FullWidthCard = styled(Card)`
   `};
 `;
 
+const TableThead = styled(BaseTableThead)`
+  ${is('smallScreen')`
+    background-color: transparent;
+  `};
+`;
+
+const TableTh = styled(BaseTableTh)`
+  @media only screen and (min-width: ${remcalc(
+      breakpoints.medium.lower
+    )}) and (max-width: ${remcalc(700)}) {
+    &:not(:first-child) {
+      width: auto;
+    }
+    padding: 0 ${remcalc(3)};
+  }
+
+  ${is('smallScreen')`
+    border: none;
+    color: ${props => props.theme.greyDark};
+    font-size: ${remcalc(13)};
+    height: auto;
+    padding: 0;
+  `};
+`;
+
+const TableTd = styled(BaseTableTd)`
+  @media only screen and (min-width: ${remcalc(
+      breakpoints.medium.lower
+    )}) and (max-width: ${remcalc(700)}) {
+    &:not(:first-child) {
+      width: auto;
+    }
+    padding: 0 ${remcalc(3)};
+  }
+
+  ${is('smallScreen')`
+    border: none;
+    font-size: ${remcalc(15)};
+    height: auto;
+    padding: ${remcalc(4)} 0;
+  `};
+`;
+
+const FormItem = styled('form')`
+  border: 1px solid ${props => props.theme.grey};
+  border-radius: 4px;
+
+  ${is('selected')`
+    border-color: ${props => props.theme.primary};
+    background-color: rgba(59,70,204,0.05);
+  `};
+`;
+
+const PackageSpecs = styled('div')`
+  border-top: 1px solid ${props => props.theme.grey};
+
+  ${is('selected')`
+    border-color: ${props => props.theme.primary};
+  `};
+`;
+
 export const Filters = ({ onResetFilters }) => (
   <Margin bottom={3}>
     <Margin bottom={3}>
@@ -129,6 +192,112 @@ export const Filters = ({ onResetFilters }) => (
     </Margin>
   </Margin>
 );
+export const MobilePackage = ({
+  selected = false,
+  id,
+  name,
+  group,
+  memory,
+  price,
+  vcpus,
+  disk,
+  ssd,
+  hasVms,
+  sortBy,
+  onRowClick
+}) => (
+  <FormItem selected={selected}>
+    <Padding all={2} onClick={() => onRowClick(id)}>
+      <FormGroup name="package" value={id} type="radio" field={Field} fluid>
+        <Radio onBlur={null} noMargin>
+          <Flex alignCenter>
+            <Margin left={2} right={1}>
+              {GroupIcons[group]}
+            </Margin>
+            <Margin left={1} right={2}>
+              <FormLabel style={{ fontWeight: '600' }} noMargin actionable>
+                {`${name}  `}
+                {ssd && <Sup badge>SSD</Sup>}
+              </FormLabel>
+            </Margin>
+          </Flex>
+        </Radio>
+      </FormGroup>
+    </Padding>
+    <PackageSpecs selected={selected}>
+      <Padding top={1} left={2} bottom={1}>
+        <Table>
+          <TableThead smallScreen>
+            <TableTr>
+              <TableTh left smallScreen>
+                <Padding top={1}>
+                  <span>RAM </span>
+                </Padding>
+              </TableTh>
+              <TableTh left smallScreen>
+                <Padding top={1}>
+                  <span>Disk </span>
+                </Padding>
+              </TableTh>
+              {hasVms && (
+                <TableTh left smallScreen>
+                  <Padding top={1}>
+                    <span>vCPU</span>
+                  </Padding>
+                </TableTh>
+              )}
+              <TableTh left smallScreen>
+                <Padding top={1}>
+                  <span>$/hour</span>
+                </Padding>
+              </TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTrActionable onClick={() => onRowClick(id)}>
+              <TableTd
+                left
+                selected={selected}
+                bold={sortBy === 'memory'}
+                smallScreen
+              >
+                {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
+              </TableTd>
+              <TableTd
+                left
+                selected={selected}
+                bold={sortBy === 'disk'}
+                smallScreen
+              >
+                <Margin inline right={1}>
+                  {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
+                </Margin>
+              </TableTd>
+              {hasVms && (
+                <TableTd
+                  left
+                  bold={sortBy === 'vcpus'}
+                  selected={selected}
+                  smallScreen
+                >
+                  {vcpus}
+                </TableTd>
+              )}
+              <TableTd
+                left
+                bold={sortBy === 'price'}
+                selected={selected}
+                smallScreen
+              >
+                {fourDecimals(price)}
+              </TableTd>
+            </TableTrActionable>
+          </TableTbody>
+        </Table>
+      </Padding>
+    </PackageSpecs>
+  </FormItem>
+);
 
 export const Package = ({
   selected = false,
diff --git a/packages/instance-steps/src/package/index.js b/packages/instance-steps/src/package/index.js
index 52b17b2d..320c0f86 100644
--- a/packages/instance-steps/src/package/index.js
+++ b/packages/instance-steps/src/package/index.js
@@ -23,10 +23,19 @@ import Step, {
 
 import { Button, PackageIcon, StatusLoader } from 'joyent-ui-toolkit';
 
-import { Filters, Packages, Package, Overview } from './components';
+import {
+  Filters,
+  Packages,
+  Package,
+  MobilePackage,
+  Overview
+} from './components';
 import getPackages from '../graphql/get-packages.gql';
 import priceData from './prices.json';
 import { Forms, Values } from '../constants';
+import { QueryBreakpoints } from 'joyent-ui-toolkit';
+
+const { SmallOnly, Medium } = QueryBreakpoints;
 
 const { IC_PKG_F_SELECT, IC_PKG_F_FILTER } = Forms;
 
@@ -84,16 +93,9 @@ const PackageComponent = ({
                   <StatusLoader />
                 ) : (
                   <Fragment>
-                    <Packages
-                      {...props}
-                      hasVms={hasVms}
-                      sortBy={sortBy}
-                      sortOrder={sortOrder}
-                      onSortBy={handleSortBy}
-                      packages={packages.length}
-                    >
+                    <SmallOnly>
                       {packages.map(({ id, ...pkg }) => (
-                        <Package
+                        <MobilePackage
                           key={id}
                           id={id}
                           selected={selected.id === id}
@@ -103,7 +105,29 @@ const PackageComponent = ({
                           {...pkg}
                         />
                       ))}
-                    </Packages>
+                    </SmallOnly>
+                    <Medium>
+                      <Packages
+                        {...props}
+                        hasVms={hasVms}
+                        sortBy={sortBy}
+                        sortOrder={sortOrder}
+                        onSortBy={handleSortBy}
+                        packages={packages.length}
+                      >
+                        {packages.map(({ id, ...pkg }) => (
+                          <Package
+                            key={id}
+                            id={id}
+                            selected={selected.id === id}
+                            hasVms={hasVms}
+                            onRowClick={handleRowClick}
+                            sortBy={sortBy}
+                            {...pkg}
+                          />
+                        ))}
+                      </Packages>
+                    </Medium>
                     <Margin top="4">
                       <Button
                         id={'next-button-packages'}
diff --git a/packages/instance-steps/src/tags/index.js b/packages/instance-steps/src/tags/index.js
index 6476ab5c..cd9f7a83 100644
--- a/packages/instance-steps/src/tags/index.js
+++ b/packages/instance-steps/src/tags/index.js
@@ -69,7 +69,7 @@ const TagsContainer = ({
   ...props
 }) => (
   <Step name="tags" getValue={handleGetValue} {...props}>
-    <StepHeader icon={<TagsIcon />}>Tags</StepHeader>
+    <StepHeader icon={1 === 0 && <TagsIcon />}>Tags</StepHeader>
     <StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata/tags">
       Tags can be used to identify your instances, group multiple instances
       together, define firewall and affinity rules, and more.
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
index a455292f..fd14f3c8 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
@@ -4941,7 +4941,6 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -5196,7 +5195,6 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -5451,7 +5449,6 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
index 18dbf850..d89c0146 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
@@ -340,7 +340,6 @@ exports[`renders <Network /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -1251,7 +1250,6 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -2175,7 +2173,6 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -3149,7 +3146,6 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -4313,7 +4309,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -5610,7 +5605,6 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
diff --git a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
index 100b112c..e0fb7f61 100644
--- a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
@@ -91,7 +91,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
 .c4 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 .c0 {
@@ -125,10 +125,24 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c4 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c4 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c4 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/packages/ui-toolkit/src/breakpoints/screens.js b/packages/ui-toolkit/src/breakpoints/screens.js
index 2008b3e3..d9967ad3 100644
--- a/packages/ui-toolkit/src/breakpoints/screens.js
+++ b/packages/ui-toolkit/src/breakpoints/screens.js
@@ -2,33 +2,33 @@ import remcalc from 'remcalc';
 
 export const breakpoints = {
   small: {
-    upper: 767
+    upper: 599
   },
   medium: {
-    upper: 1023,
-    lower: 768
+    upper: 999,
+    lower: 600
   },
   large: {
-    upper: 1199,
-    lower: 1024
+    upper: 1399,
+    lower: 1000
   },
   xlarge: {
-    lower: 1200
+    lower: 1400
   }
 };
 
 export default {
-  // >= 768px
+  // >= 599px
   smallOnly: `only screen and (max-width: ${remcalc(breakpoints.small.upper)})`,
   small: `only screen and (min-width: ${remcalc(breakpoints.small.upper)})`,
-  // >= 1024px
+  // >= 999px
   mediumOnly: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})
     and (max-width: ${remcalc(breakpoints.medium.upper)})`,
   mediumDown: `only screen and (max-width: ${remcalc(
     breakpoints.medium.upper
   )})`,
   medium: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})`,
-  // >= 1200px
+  // >= 1400px
   largeOnly: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})
     and (max-width: ${remcalc(breakpoints.large.upper)})`,
   largeDown: `only screen and (max-width: ${remcalc(breakpoints.large.upper)})`,
diff --git a/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap b/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
index aa677f79..4d4bc9cb 100644
--- a/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
+++ b/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
@@ -74,7 +74,6 @@ exports[`Form Checkbox 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -485,7 +484,6 @@ exports[`Form Radio 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
diff --git a/packages/ui-toolkit/src/form/base/toggle.js b/packages/ui-toolkit/src/form/base/toggle.js
index 7e9cda46..093ca406 100644
--- a/packages/ui-toolkit/src/form/base/toggle.js
+++ b/packages/ui-toolkit/src/form/base/toggle.js
@@ -45,7 +45,6 @@ const Label = styled.label`
   height: ${remcalc(18)};
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
 
   background-color: rgb(255, 255, 255);
diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js
index 9e5a7e97..5a7602a3 100644
--- a/packages/ui-toolkit/src/index.js
+++ b/packages/ui-toolkit/src/index.js
@@ -21,7 +21,8 @@ export { default as Breadcrumb, Item as BreadcrumbItem } from './breadcrumb';
 
 export {
   styled as StyledBreakpoints,
-  query as QueryBreakpoints
+  query as QueryBreakpoints,
+  breakpoints as ValueBreakpoints
 } from './breakpoints';
 
 export {
diff --git a/packages/ui-toolkit/src/layout/__tests__/__snapshots__/layout.spec.js.snap b/packages/ui-toolkit/src/layout/__tests__/__snapshots__/layout.spec.js.snap
index 37ad322f..0da9a254 100644
--- a/packages/ui-toolkit/src/layout/__tests__/__snapshots__/layout.spec.js.snap
+++ b/packages/ui-toolkit/src/layout/__tests__/__snapshots__/layout.spec.js.snap
@@ -30,7 +30,7 @@ exports[`Layout ViewContainer 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 @media only screen and (min-width:48em) {
@@ -51,10 +51,24 @@ exports[`Layout ViewContainer 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -72,7 +86,7 @@ exports[`Layout ViewContainer center 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -114,10 +128,24 @@ exports[`Layout ViewContainer center 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -155,7 +183,7 @@ exports[`Layout ViewContainer main 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -177,10 +205,24 @@ exports[`Layout ViewContainer main 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/packages/ui-toolkit/src/layout/__tests__/layout.spec.js b/packages/ui-toolkit/src/layout/__tests__/layout.spec.js
index 1cc6594d..c2f867d4 100644
--- a/packages/ui-toolkit/src/layout/__tests__/layout.spec.js
+++ b/packages/ui-toolkit/src/layout/__tests__/layout.spec.js
@@ -32,7 +32,7 @@ describe('Layout', () => {
       .toJSON();
 
     expect(tree).toMatchSnapshot();
-    expect(tree).toHaveStyleRule('max-width', remcalc(1000));
+    expect(tree).toHaveStyleRule('max-width', remcalc(1260));
   });
 
   test('ViewContainer fluid', () => {
diff --git a/packages/ui-toolkit/src/layout/view-container.js b/packages/ui-toolkit/src/layout/view-container.js
index 1d27ae99..1bdbc595 100644
--- a/packages/ui-toolkit/src/layout/view-container.js
+++ b/packages/ui-toolkit/src/layout/view-container.js
@@ -15,11 +15,21 @@ export default styled(Grid)`
   `};
 
   ${isNot('fluid')`
-    max-width: ${remcalc(1000)};
+    max-width: ${remcalc(1260)};
 
     ${breakpoints.smallOnly`
-      padding-left: ${remcalc(6)};
-      padding-right: ${remcalc(6)};
+      padding-left: ${remcalc(12)};
+      padding-right: ${remcalc(12)};
+    `};
+
+    ${breakpoints.mediumOnly`
+      padding-left: ${remcalc(30)};
+      padding-right: ${remcalc(30)};
+    `};
+
+    ${breakpoints.largeOnly`
+      padding-left: ${remcalc(70)};
+      padding-right: ${remcalc(70)};
     `};
   `};
 
diff --git a/packages/ui-toolkit/src/styleguide/parallax.js b/packages/ui-toolkit/src/styleguide/parallax.js
index 14c8c638..34b22bf8 100644
--- a/packages/ui-toolkit/src/styleguide/parallax.js
+++ b/packages/ui-toolkit/src/styleguide/parallax.js
@@ -92,8 +92,8 @@ export default class extends Component {
 
   skipParallax = () => {
     if (
-      this.state.show &&
-      window.scrollY < document.getElementsByTagName('header')[0].offsetTop
+      window.scrollY < document.getElementsByTagName('header')[0].offsetTop &&
+      this.state.show
     ) {
       window.scroll({
         top: document.getElementsByTagName('header')[0].offsetTop,
@@ -106,7 +106,7 @@ export default class extends Component {
   checkpoint = () => {
     if (isScrolledOutsideView()) {
       window.removeEventListener('scroll', this.checkpoint);
-      this.setState({ show: false });
+      setTimeout(() => this.setState({ show: false }), 10);
     }
   };