fix(my-joy-beta): create instance - 8 col descriptions

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap

@@ -459,7 +459,7 @@ exports[`renders <Rule/> without throwing 1`] = `
               equalling
             </option>
             <option
-              value="!equalling"
+              value="not-equalling"
             >
               not equalling
             </option>
@@ -925,7 +925,7 @@ exports[`renders <Rule/> without throwing 2`] = `
               equalling
             </option>
             <option
-              value="!equalling"
+              value="not-equalling"
             >
               not equalling
             </option>

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap

@@ -13,19 +13,19 @@ exports[`renders <Images Images="test" /> without throwing 1`] = `
 `;
 
 exports[`renders <Images expanded /> without throwing 1`] = `
-.c0 {
+.c2 {
   margin-bottom: 1rem;
 }
 
-.c2 {
+.c4 {
   margin-bottom: 2rem;
 }
 
-.c10 {
+.c11 {
   margin-top: 2rem;
 }
 
-.c4 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -49,7 +49,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   align-items: center;
 }
 
-.c9 {
+.c0 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -69,26 +69,35 @@ exports[`renders <Images expanded /> without throwing 1`] = `
 }
 
 .c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
+.c3 + p,
-.c1 + small,
+.c3 + small,
-.c1 + h1,
+.c3 + h1,
-.c1 + h2,
+.c3 + h2,
-.c1 + label,
+.c3 + label,
-.c1 + h3,
+.c3 + h3,
-.c1 + h4,
+.c3 + h4,
-.c1 + h5,
+.c3 + h5,
-.c1 + div,
+.c3 + div,
-.c1 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
-.c13 {
+.c14 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -101,30 +110,30 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c13::-moz-focus-inner,
+.c14::-moz-focus-inner,
-.c13[type='button']::-moz-focus-inner,
+.c14[type='button']::-moz-focus-inner,
-.c13[type='reset']::-moz-focus-inner,
+.c14[type='reset']::-moz-focus-inner,
-.c13[type='submit']::-moz-focus-inner {
+.c14[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c13:-moz-focusring,
+.c14:-moz-focusring,
-.c13[type='button']:-moz-focusring,
+.c14[type='button']:-moz-focusring,
-.c13[type='reset']:-moz-focusring,
+.c14[type='reset']:-moz-focusring,
-.c13[type='submit']:-moz-focusring {
+.c14[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c13 + button {
+.c14 + button {
   margin-left: 0.375rem;
 }
 
-.c12 {
+.c13 {
   display: inline-block;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -169,50 +178,50 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c11:focus {
+.c12:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c11:hover {
+.c12:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c11:active,
+.c12:active,
-.c11:active:hover,
+.c12:active:hover,
-.c11:active:focus {
+.c12:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c11[disabled] {
+.c12[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c11:focus {
+.c12:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c11:hover {
+.c12:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c11:active,
+.c12:active,
-.c11:active:hover,
+.c12:active:hover,
-.c11:active:focus {
+.c12:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c3 {
+.c5 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -227,7 +236,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c5 {
+.c7 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -240,7 +249,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c6 {
+.c8 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -253,29 +262,29 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   align-items: center;
 }
 
-.c7 {
+.c9 {
   display: none;
 }
 
-.c7:checked + label {
+.c9:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c7:checked + label:after {
+.c9:checked + label:after {
   left: 50%;
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c7:checked + label:active {
+.c9:checked + label:active {
   box-shadow: none;
 }
 
-.c7:checked + label:active:after {
+.c9:checked + label:active:after {
   margin-left: -00.75rem;
 }
 
-.c8 {
+.c10 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -295,28 +304,28 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   margin-right: 0.375rem;
 }
 
-.c8::selection {
+.c10::selection {
   background: none;
 }
 
-.c8:active {
+.c10:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c8:active:after {
+.c10:active:after {
   padding-right: 0.75rem;
 }
 
-.c8:hover {
+.c10:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c8:hover:after {
+.c10:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c8:after,
+.c10:after,
-.c8:before {
+.c10:before {
   position: relative;
   display: block;
   content: '';
@@ -324,7 +333,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   height: 100%;
 }
 
-.c8:after {
+.c10:after {
   left: 0;
   border-radius: 2em;
   background: rgb(255,255,255);
@@ -333,26 +342,52 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c8:active {
+.c10:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c8:active:after {
+.c10:active:after {
   padding-right: 0.75rem;
 }
 
-.c8:before {
+.c10:before {
   display: none;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <form
   onSubmit={undefined}
 >
   <div
     className="c0"
   >
-    <p
+    <div
       className="c1"
+    >
+      <div
+        className="c2"
+      >
+        <p
+          className="c3"
         >
           Hardware virtual machines are generally used for non-containerized applications. Infrastructure containers are generally for running any Linux image on secure, bare metal containers.
            
@@ -365,39 +400,41 @@ exports[`renders <Images expanded /> without throwing 1`] = `
           </a>
         </p>
       </div>
+    </div>
+  </div>
   <div
-    className="c2"
+    className="c4"
   >
     <div
-      className="c3"
+      className="c5"
       name="vms"
       role="group"
       style={undefined}
     >
       <div
-        className="c4"
+        className="c6"
       >
         <label
-          className="c5"
+          className="c7"
           htmlFor="Y"
         >
           Infrastructure Container 
         </label>
         <div
-          className="c6"
+          className="c8"
         >
           <input
             checked={undefined}
-            className="c7"
+            className="c9"
             id="Y"
             type="checkbox"
           />
           <label
-            className="c8"
+            className="c10"
             htmlFor="Y"
           />
           <label
-            className="c5"
+            className="c7"
             htmlFor="Y"
           >
              
@@ -408,13 +445,13 @@ exports[`renders <Images expanded /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c9"
+    className="c0"
   />
   <div
-    className="c10"
+    className="c11"
   >
     <button
-      className="c11 c12 c13"
+      className="c12 c13 c14"
       disabled={true}
       href=""
       type="submit"

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap

@@ -7,31 +7,59 @@ exports[`renders <Name /> without throwing 1`] = `
 `;
 
 exports[`renders <Name expanded /> without throwing 1`] = `
-.c0 {
+.c2 {
   margin-bottom: 1rem;
 }
 
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
 .c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
+.c3 + p,
-.c1 + small,
+.c3 + small,
-.c1 + h1,
+.c3 + h1,
-.c1 + h2,
+.c3 + h2,
-.c1 + label,
+.c3 + label,
-.c1 + h3,
+.c3 + h3,
-.c1 + h4,
+.c3 + h4,
-.c1 + h5,
+.c3 + h5,
-.c1 + div,
+.c3 + div,
-.c1 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
-.c8 {
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -44,30 +72,30 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c8::-moz-focus-inner,
+.c10::-moz-focus-inner,
-.c8[type='button']::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
-.c8[type='reset']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
-.c8[type='submit']::-moz-focus-inner {
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c8:-moz-focusring,
+.c10:-moz-focusring,
-.c8[type='button']:-moz-focusring,
+.c10[type='button']:-moz-focusring,
-.c8[type='reset']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
-.c8[type='submit']:-moz-focusring {
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c8 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c7 {
+.c9 {
   display: inline-block;
 }
 
-.c6 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -107,33 +135,33 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c6:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c6:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c6:active,
+.c8:active,
-.c6:active:hover,
+.c8:active:hover,
-.c6:active:focus {
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c6[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c2 {
+.c4 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -149,7 +177,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   width: 100%;
 }
 
-.c4 {
+.c6 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -173,45 +201,45 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   outline: 0;
 }
 
-.c4::-webkit-input-placeholder {
+.c6::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c4::-moz-placeholder {
+.c6::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c4:-ms-input-placeholder {
+.c6:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c4:invalid {
+.c6:invalid {
   box-shadow: none;
 }
 
-.c4:disabled {
+.c6:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c4:disabled::-webkit-input-placeholder {
+.c6:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c4:disabled::-moz-placeholder {
+.c6:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c4:disabled:-ms-input-placeholder {
+.c6:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c4:focus {
+.c6:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c3 {
+.c5 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -224,7 +252,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c5 {
+.c7 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -237,41 +265,69 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <form
   onSubmit={undefined}
 >
   <div
     className="c0"
   >
-    <p
+    <div
       className="c1"
+    >
+      <div
+        className="c2"
+      >
+        <p
+          className="c3"
         >
           Your instance name will be used to identify this specific instance.
         </p>
       </div>
+    </div>
+  </div>
   <div
-    className="c2"
+    className="c4"
     name="name"
     role="group"
     style={undefined}
   >
     <label
-      className="c3"
+      className="c5"
       htmlFor="Y"
     >
       Name
     </label>
     <input
-      className="c4"
+      className="c6"
       disabled={false}
       id="Y"
     />
     <label
-      className="c5"
+      className="c7"
     />
   </div>
   <button
-    className="c6 c7 c8"
+    className="c8 c9 c10"
     disabled={undefined}
     href=""
     type="submit"

packages/my-joy-beta/src/components/create-instance/description.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Row, Col } from 'react-styled-flexboxgrid';
+import { Margin } from 'styled-components-spacing';
+import { P } from 'joyent-ui-toolkit';
+
+export default ({ children }) => (
+  <Row>
+    <Col xs={12} sm={8}>
+      <Margin bottom={3}>
+        <P>{children}</P>
+      </Margin>
+    </Col>
+  </Row>
+);

packages/my-joy-beta/src/components/create-instance/firewall.js

@@ -1,3 +1,5 @@
+/* eslint-disable camelcase */
+
 import React, { Fragment } from 'react';
 import { Field } from 'redux-form';
 import { Margin, Padding } from 'styled-components-spacing';
@@ -7,17 +9,9 @@ import remcalc from 'remcalc';
 import constantCase from 'constant-case';
 
 import {
-  NameIcon,
   H3,
-  P,
   FormGroup,
-  FormLabel,
-  Input,
-  FormMeta,
-  Button,
   Toggle,
-  Card,
-  CardOutlet,
   Divider,
   Row,
   Col,
@@ -25,7 +19,6 @@ import {
 } from 'joyent-ui-toolkit';
 
 import Tag from '@components/instances/tags';
-import Title from './title';
 
 const Box = styled.div`
   display: inline-block;
@@ -131,8 +124,7 @@ export default ({
     </Margin>
     {enabled && defaultRules.length ? (
       <Fragment>
-        <H3>Default firewall rules</H3>
+        <H3 noMargin>Default firewall rules</H3>
-        <span /> {/* trick H3 margin sibling rule */}
         <Margin top={3}>
           {defaultRules.map(rule => (
             <Margin bottom={2}>
@@ -147,8 +139,7 @@ export default ({
     ) : null}
     {enabled && tagRules.length ? (
       <Fragment>
-        <H3>Firewall rules from instance tags</H3>
+        <H3 noMargin>Firewall rules from instance tags</H3>
-        <span /> {/* trick H3 margin sibling rule */}
         <Margin top={3}>
           {tagRules.map(rule => (
             <Margin bottom={2}>

packages/my-joy-beta/src/components/create-instance/image.js

@@ -19,6 +19,7 @@ import {
   Select,
   StatusLoader
 } from 'joyent-ui-toolkit';
+import Description from '@components/create-instance/description';
 
 const fadeIn = keyframes`
   from {
@@ -103,11 +104,10 @@ export default ({
   <form onSubmit={handleSubmit}>
     {expanded && (
       <Fragment>
-        <Margin bottom={3}>
+        <Description>
-          <P>
           Hardware virtual machines are generally used for non-containerized
-            applications. Infrastructure containers are generally for running
+          applications. Infrastructure containers are generally for running any
-            any Linux image on secure, bare metal containers.{' '}
+          Linux image on secure, bare metal containers.{' '}
           <a
             href="https://docs.joyent.com/private-cloud/images"
             rel="noopener noreferrer"
@@ -115,8 +115,7 @@ export default ({
           >
             Read the docs
           </a>
-          </P>
+        </Description>
-        </Margin>
         {loading ? (
           <StatusLoader />
         ) : (

packages/my-joy-beta/src/components/create-instance/name.js

@@ -1,10 +1,10 @@
 import React, { Fragment } from 'react';
 import { Field } from 'redux-form';
 import { Margin } from 'styled-components-spacing';
+import Description from '@components/create-instance/description';
 
 import {
   H3,
-  P,
   FormGroup,
   FormLabel,
   Input,
@@ -16,11 +16,9 @@ export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
   <form onSubmit={handleSubmit}>
     {expanded ? (
       <Fragment>
-        <Margin bottom={3}>
+        <Description>
-          <P>
           Your instance name will be used to identify this specific instance.
-          </P>
+        </Description>
-        </Margin>
         <FormGroup name="name" fluid field={Field}>
           <FormLabel>Name</FormLabel>
           <Input />

packages/my-joy-beta/src/components/create-instance/network.js

@@ -1,9 +1,12 @@
+/* eslint-disable camelcase */
+
 import React from 'react';
 import { Field } from 'redux-form';
 import { Margin, Padding } from 'styled-components-spacing';
 import styled from 'styled-components';
 import Flex, { FlexItem } from 'styled-flex-component';
 import remcalc from 'remcalc';
+import { Row, Col } from 'react-styled-flexboxgrid';
 
 import {
   H4,
@@ -34,6 +37,8 @@ const Box = styled.div`
 `;
 
 export const Collapsed = ({ name, fabric, ...network }) => (
+  <Row>
+    <Col xs={12} sm={8}>
       <Margin inline right={3} top={3}>
         <Box>
           <Flex column>
@@ -82,6 +87,8 @@ export const Collapsed = ({ name, fabric, ...network }) => (
           </Flex>
         </Box>
       </Margin>
+    </Col>
+  </Row>
 );
 
 export const Expanded = ({
@@ -97,6 +104,8 @@ export const Expanded = ({
   onInfoClick,
   ...network
 }) => (
+  <Row>
+    <Col xs={12} sm={8}>
       <Margin bottom={4}>
         <Card shadow>
           <CardHeader secondary={selected}>
@@ -199,6 +208,8 @@ export const Expanded = ({
           </CardOutlet>
         </Card>
       </Margin>
+    </Col>
+  </Row>
 );
 
 export default ({ small = false, ...rest }) =>

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap

@@ -384,35 +384,89 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c1 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
+.c3 + p,
-.c1 + small,
+.c3 + small,
-.c1 + h1,
+.c3 + h1,
-.c1 + h2,
+.c3 + h2,
-.c1 + label,
+.c3 + label,
-.c1 + h3,
+.c3 + h3,
-.c1 + h4,
+.c3 + h4,
-.c1 + h5,
+.c3 + h5,
-.c1 + div,
+.c3 + div,
-.c1 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
 .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
   margin-bottom: 1rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
     className="c0"
 >
-    <p
+    <div
         className="c1"
+    >
+        <div
+            className="c2"
+        >
+            <p
+                className="c3"
             >
                 Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance.
                  
@@ -423,6 +477,8 @@ Array [
                     Read the docs
                 </a>
             </p>
+        </div>
+    </div>
 </div>,
   .c20 {
   font-family: sans-serif;
@@ -1839,35 +1895,89 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c1 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
+.c3 + p,
-.c1 + small,
+.c3 + small,
-.c1 + h1,
+.c3 + h1,
-.c1 + h2,
+.c3 + h2,
-.c1 + label,
+.c3 + label,
-.c1 + h3,
+.c3 + h3,
-.c1 + h4,
+.c3 + h4,
-.c1 + h5,
+.c3 + h5,
-.c1 + div,
+.c3 + div,
-.c1 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
 .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
   margin-bottom: 1rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
     className="c0"
 >
-    <p
+    <div
         className="c1"
+    >
+        <div
+            className="c2"
+        >
+            <p
+                className="c3"
             >
                 Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance.
                  
@@ -1878,6 +1988,8 @@ Array [
                     Read the docs
                 </a>
             </p>
+        </div>
+    </div>
 </div>,
   .c2 {
   font-family: sans-serif;
@@ -4539,35 +4651,89 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c1 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
+.c3 + p,
-.c1 + small,
+.c3 + small,
-.c1 + h1,
+.c3 + h1,
-.c1 + h2,
+.c3 + h2,
-.c1 + label,
+.c3 + label,
-.c1 + h3,
+.c3 + h3,
-.c1 + h4,
+.c3 + h4,
-.c1 + h5,
+.c3 + h5,
-.c1 + div,
+.c3 + div,
-.c1 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
 .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
   margin-bottom: 1rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
     className="c0"
 >
-    <p
+    <div
         className="c1"
+    >
+        <div
+            className="c2"
+        >
+            <p
+                className="c3"
             >
                 Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance.
                  
@@ -4578,6 +4744,8 @@ Array [
                     Read the docs
                 </a>
             </p>
+        </div>
+    </div>
 </div>,
   .c21 {
   font-family: sans-serif;

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap

@@ -358,35 +358,89 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c1 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
+.c3 + p,
-.c1 + small,
+.c3 + small,
-.c1 + h1,
+.c3 + h1,
-.c1 + h2,
+.c3 + h2,
-.c1 + label,
+.c3 + label,
-.c1 + h3,
+.c3 + h3,
-.c1 + h4,
+.c3 + h4,
-.c1 + h5,
+.c3 + h5,
-.c1 + div,
+.c3 + div,
-.c1 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
 .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
   margin-bottom: 1rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
     className="c0"
 >
-    <p
+    <div
         className="c1"
+    >
+        <div
+            className="c2"
+        >
+            <p
+                className="c3"
             >
                 Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more.
                  
@@ -397,6 +451,8 @@ Array [
                     Read the docs
                 </a>
             </p>
+        </div>
+    </div>
 </div>,
   .c0 {
   margin: 0;
@@ -1790,35 +1846,89 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c1 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
+.c3 + p,
-.c1 + small,
+.c3 + small,
-.c1 + h1,
+.c3 + h1,
-.c1 + h2,
+.c3 + h2,
-.c1 + label,
+.c3 + label,
-.c1 + h3,
+.c3 + h3,
-.c1 + h4,
+.c3 + h4,
-.c1 + h5,
+.c3 + h5,
-.c1 + div,
+.c3 + div,
-.c1 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
 .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
   margin-bottom: 1rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
     className="c0"
 >
-    <p
+    <div
         className="c1"
+    >
+        <div
+            className="c2"
+        >
+            <p
+                className="c3"
             >
                 Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more.
                  
@@ -1829,6 +1939,8 @@ Array [
                     Read the docs
                 </a>
             </p>
+        </div>
+    </div>
 </div>,
   .c0 {
   margin: 0;
@@ -2414,35 +2526,89 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c1 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
+.c3 + p,
-.c1 + small,
+.c3 + small,
-.c1 + h1,
+.c3 + h1,
-.c1 + h2,
+.c3 + h2,
-.c1 + label,
+.c3 + label,
-.c1 + h3,
+.c3 + h3,
-.c1 + h4,
+.c3 + h4,
-.c1 + h5,
+.c3 + h5,
-.c1 + div,
+.c3 + div,
-.c1 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
 .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
   margin-bottom: 1rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
     className="c0"
 >
-    <p
+    <div
         className="c1"
+    >
+        <div
+            className="c2"
+        >
+            <p
+                className="c3"
             >
                 Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more.
                  
@@ -2453,6 +2619,8 @@ Array [
                     Read the docs
                 </a>
             </p>
+        </div>
+    </div>
 </div>,
   .c0 {
   margin: 0;

packages/my-joy-beta/src/containers/create-instance/affinity.js

@@ -12,6 +12,7 @@ import { AffinityIcon, P, Button, H3 } from 'joyent-ui-toolkit';
 import Title from '@components/create-instance/title';
 import { Rule, Header } from '@components/create-instance/affinity';
 import KeyValue from '@components/instances/key-value';
+import Description from '@components/create-instance/description';
 
 const FORM_NAME_CREATE = 'CREATE-INSTANCE-AFFINITY-ADD';
 const FORM_NAME_EDIT = i => `CREATE-INSTANCE-AFFINITY-EDIT-${i}`;
@@ -46,19 +47,17 @@ export const Affinity = ({
   <Fragment>
     <Title icon={<AffinityIcon />}>Affinity</Title>
     {expanded ? (
-      <Margin bottom={3}>
+      <Description>
-        <P>
+        Affinity rules control the location of instances, to help reduce traffic
-          Affinity rules control the location of instances, to help reduce
+        across networks and keep the workload balanced. With strict rules,
-          traffic across networks and keep the workload balanced. With strict
+        instances are only provisioned when the criteria is met.{' '}
-          rules, instances are only provisioned when the criteria is met.{' '}
         <a
           target="__blank"
           href="https://apidocs.joyent.com/docker/features/placement"
         >
           Read the docs
         </a>
-        </P>
+      </Description>
-      </Margin>
     ) : null}
     {proceeded ? (
       <Margin bottom={4}>

packages/my-joy-beta/src/containers/create-instance/cns.js

@@ -30,6 +30,7 @@ import {
 } from '@components/create-instance/cns';
 import Title from '@components/create-instance/title';
 import Tag from '@components/instances/tags';
+import Description from '@components/create-instance/description';
 
 const CNS_FORM = 'create-instance-cns';
 
@@ -50,8 +51,7 @@ const CNSContainer = ({
   <Fragment>
     <Title icon={<CnsIcon />}>Container Name Service</Title>
     {expanded ? (
-      <Margin bottom={3}>
+      <Description>
-        <P>
         Triton CNS is used to automatically update hostnames for your
         instances*. You can serve multiple instances (with multiple IP
         addresses) under the same hostname by matching the CNS service names.{' '}
@@ -62,8 +62,7 @@ const CNSContainer = ({
         >
           Read the docs
         </a>
-        </P>
+      </Description>
-      </Margin>
     ) : null}
     {expanded && cnsEnabled ? (
       <Card>

packages/my-joy-beta/src/containers/create-instance/firewall.js

@@ -5,14 +5,14 @@ import ReduxForm from 'declarative-redux-form';
 import { set } from 'react-redux-values';
 import { connect } from 'react-redux';
 import get from 'lodash.get';
-import find from 'lodash.find';
 import forceArray from 'force-array';
 
 import Title from '@components/create-instance/title';
+import Description from '@components/create-instance/description';
 import FirewallForm from '@components/create-instance/firewall';
 import ListFwRules from '@graphql/list-fw-rules.gql';
 
-import { StatusLoader, FirewallIcon, P, H3, Button } from 'joyent-ui-toolkit';
+import { StatusLoader, FirewallIcon, H3, Button } from 'joyent-ui-toolkit';
 
 const FORM_NAME = 'CREATE-INSTANCE-FIREWALL';
 
@@ -29,8 +29,7 @@ const Firewall = ({
   <Fragment>
     <Title icon={<FirewallIcon />}>Firewall</Title>
     {expanded ? (
-      <Margin bottom={3}>
+      <Description>
-        <P>
         Cloud Firewall rules control traffic across instances. Enabling the
         firewall adds a default set of rules and rules defined by your chosen
         tags.{' '}
@@ -40,8 +39,7 @@ const Firewall = ({
         >
           Read more
         </a>
-        </P>
+      </Description>
-      </Margin>
     ) : null}
     {loading && expanded ? <StatusLoader /> : null}
     {!loading ? (

packages/my-joy-beta/src/containers/create-instance/metadata.js

@@ -10,6 +10,7 @@ import get from 'lodash.get';
 import { MetadataIcon, P, Button, H3 } from 'joyent-ui-toolkit';
 
 import Title from '@components/create-instance/title';
+import Description from '@components/create-instance/description';
 import KeyValue from '@components/instances/key-value';
 
 const FORM_NAME_CREATE = 'CREATE-INSTANCE-METADATA-ADD';
@@ -32,8 +33,7 @@ export const Metadata = ({
   <Fragment>
     <Title icon={<MetadataIcon />}>Metadata</Title>
     {expanded ? (
-      <Margin bottom={3}>
+      <Description>
-        <P>
         Metadata can be used to pass data to the instance. It can also be used
         to inject a custom boot script. Unlike tags, metadata is only viewable
         inside the instance.{' '}
@@ -43,8 +43,7 @@ export const Metadata = ({
         >
           Read the docs
         </a>
-        </P>
+      </Description>
-      </Margin>
     ) : null}
     {proceeded ? (
       <Margin bottom={4}>

packages/my-joy-beta/src/containers/create-instance/networks.js

@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
 import { set } from 'react-redux-values';
-import { Margin } from 'styled-components-spacing';
 import { compose, graphql } from 'react-apollo';
 import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
@@ -9,6 +8,7 @@ import forceArray from 'force-array';
 
 import { NetworkIcon, P, Button, H3, StatusLoader } from 'joyent-ui-toolkit';
 
+import Description from '@components/create-instance/description';
 import Title from '@components/create-instance/title';
 import Network from '@components/create-instance/network';
 import ListNetworks from '@graphql/list-networks.gql';
@@ -30,21 +30,19 @@ export const Networks = ({
     <Fragment>
       <Title icon={<NetworkIcon />}>Networks</Title>
       {expanded ? (
-        <Margin bottom={3}>
+        <Description>
-          <P>
           Instances are automatically connected to a private fabric network,
           which is the best choice for internal communication within your
           application. Data center networks are the best choice for exposing
-            your application to the public internet (if the data center network
+          your application to the public internet (if the data center network is
-            is a public network).{' '}
+          a public network).{' '}
           <a
             target="__blank"
             href="https://docs.joyent.com/public-cloud/network/sdn"
           >
             Read more
           </a>
-          </P>
+        </Description>
-        </Margin>
       ) : null}
       {proceeded && !expanded ? (
         <H3>

packages/my-joy-beta/src/containers/create-instance/package.js

@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-import { Margin } from 'styled-components-spacing';
 import { compose, graphql } from 'react-apollo';
 import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
@@ -18,6 +17,7 @@ import {
   Overview
 } from '@components/create-instance/package';
 import Title from '@components/create-instance/title';
+import Description from '@components/create-instance/description';
 import priceData from '../../data/prices.json';
 
 import getPackages from '../../graphql/get-packages.gql';
@@ -39,8 +39,7 @@ const PackageContainer = ({
   <Fragment>
     <Title icon={<PackageIcon />}>Package</Title>
     {expanded ? (
-      <Margin bottom={3}>
+      <Description>
-        <P>
         A package defines the specs of your instance. On Triton, packages can
         only increase in size.{' '}
         <a
@@ -50,8 +49,7 @@ const PackageContainer = ({
         >
           Read the docs
         </a>
-        </P>
+      </Description>
-      </Margin>
     ) : null}
     {!loading && expanded ? (
       <ReduxForm

packages/my-joy-beta/src/containers/create-instance/tags.js

@@ -12,6 +12,7 @@ import { TagsIcon, P, Button, H3, TagList } from 'joyent-ui-toolkit';
 import Title from '@components/create-instance/title';
 import Tag from '@components/instances/tags';
 import KeyValue from '@components/instances/key-value';
+import Description from '@components/create-instance/description';
 
 const FORM_NAME_CREATE = 'CREATE-INSTANCE-TAGS-ADD';
 const FORM_NAME_EDIT = i => `CREATE-INSTANCE-TAGS-EDIT-${i}`;
@@ -33,8 +34,7 @@ export const Tags = ({
   <Fragment>
     <Title icon={<TagsIcon />}>Tags</Title>
     {expanded ? (
-      <Margin bottom={3}>
+      <Description>
-        <P>
         Tags can be used to identify your instances, group multiple instances
         together, define firewall and affinity rules, and more.{' '}
         <a
@@ -43,8 +43,7 @@ export const Tags = ({
         >
           Read the docs
         </a>
-        </P>
+      </Description>
-      </Margin>
     ) : null}
     {proceeded ? (
       <Margin bottom={4}>