From 7f0658e24623869354941ad6043a50b892d80d7f Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Wed, 21 Mar 2018 17:35:51 +0000
Subject: [PATCH] feat(instances): route objects id

fixes #1329
---
 bundle/package.json                           |  2 +-
 .../my-joy-images/src/components/image.js     | 29 ++++++----
 .../my-joy-images/src/components/summary.js   |  2 +-
 .../my-joy-images/src/containers/create.js    | 15 ++---
 packages/my-joy-images/src/containers/menu.js |  6 +-
 .../my-joy-images/src/containers/summary.js   | 17 +++---
 packages/my-joy-images/src/containers/tags.js | 11 +---
 .../my-joy-images/src/graphql/get-image.gql   |  4 +-
 .../src/graphql/get-instance.gql              | 10 ++--
 .../my-joy-images/src/graphql/get-tags.gql    |  4 +-
 .../__tests__/__snapshots__/list.spec.js.snap | 34 +++++++----
 .../__snapshots__/summary.spec.js.snap        |  4 +-
 .../src/components/instances/list.js          | 11 ++--
 .../src/components/instances/summary.js       |  2 +-
 .../__tests__/__snapshots__/menu.spec.js.snap |  2 +-
 .../src/containers/create-instance/image.js   |  6 +-
 .../src/containers/create-instance/index.js   |  2 +-
 .../__tests__/__snapshots__/list.spec.js.snap | 56 +++++++++++--------
 .../__snapshots__/summary.spec.js.snap        |  4 +-
 .../instances/__tests__/list.spec.js          |  4 +-
 .../src/containers/instances/cns.js           | 11 ++--
 .../src/containers/instances/firewall.js      | 13 ++---
 .../src/containers/instances/list.js          | 22 ++++----
 .../src/containers/instances/metadata.js      | 11 ++--
 .../src/containers/instances/networks.js      |  6 +-
 .../src/containers/instances/snapshots.js     | 10 ++--
 .../src/containers/instances/summary.js       | 18 ++----
 .../src/containers/instances/tags.js          | 11 ++--
 .../src/containers/instances/user-script.js   | 11 ++--
 .../__snapshots__/breadcrumb.spec.js.snap     |  4 +-
 .../src/containers/navigation/menu.js         |  6 +-
 .../src/graphql/get-instance.gql              | 38 ++++++-------
 .../src/graphql/list-instance-fw-rules.gql    | 24 ++++----
 .../src/graphql/list-instance-networks.gql    | 32 +++++------
 .../src/graphql/list-metadata.gql             | 14 ++---
 .../src/graphql/list-snapshots.gql            | 18 +++---
 .../src/graphql/list-tags.gql                 | 14 ++---
 packages/ui-toolkit/src/base/global.js        |  2 +-
 .../__snapshots__/index.spec.js.snap          |  2 +-
 packages/ui-toolkit/src/breadcrumb/index.js   |  3 +-
 packages/ui-toolkit/src/button/group.js       |  3 +-
 .../__snapshots__/section.spec.js.snap        |  2 +-
 packages/ui-toolkit/src/section-list/index.js |  2 +-
 yarn.lock                                     |  6 +-
 44 files changed, 245 insertions(+), 263 deletions(-)

diff --git a/bundle/package.json b/bundle/package.json
index ac325efd..22f4d251 100644
--- a/bundle/package.json
+++ b/bundle/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "brule": "^3.1.0",
-    "cloudapi-gql": "^7.1.1",
+    "cloudapi-gql": "^7.1.3",
     "hapi": "^17.2.0",
     "hapi-triton-auth": "^2.0.0",
     "inert": "^5.1.0",
diff --git a/packages/my-joy-images/src/components/image.js b/packages/my-joy-images/src/components/image.js
index 71ae676e..2baa3c94 100644
--- a/packages/my-joy-images/src/components/image.js
+++ b/packages/my-joy-images/src/components/image.js
@@ -1,10 +1,10 @@
 import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import remcalc from 'remcalc';
 import { Field } from 'redux-form';
 import Flex from 'styled-flex-component';
 import { Padding, Margin } from 'styled-components-spacing';
+import remcalc from 'remcalc';
 
 import {
   Card,
@@ -50,7 +50,7 @@ const Type = styled(Margin)`
 `;
 
 const Content = styled(Padding)`
-  max-width: calc(100% - 48px);
+  max-width: calc(100% - ${remcalc(48)});
   overflow: hidden;
 `;
 
@@ -64,13 +64,19 @@ const DividerContainer = styled(Margin)`
 `;
 
 const Actions = styled(Flex)`
-  width: 48px;
-  height: 48px;
-  min-width: 48px;
+  width: ${remcalc(48)};
+  height: ${remcalc(48)};
+  min-width: ${remcalc(48)};
+`;
+
+const ActionsWrapper = styled(Flex)`
+  height: 100%;
+  border-left: ${remcalc(1)} solid ${props => props.theme.grey};
 `;
 
 export const Image = ({
   name,
+  id,
   os,
   version,
   type,
@@ -79,7 +85,7 @@ export const Image = ({
   onCreateInstance
 }) => (
   <Margin bottom={3}>
-    <CardAnchor to={`/images/${name}`} component={Link}>
+    <CardAnchor to={`/images/${id}`} component={Link}>
       <Card radius>
         {removing ? (
           <Padding all={2}>
@@ -96,7 +102,7 @@ export const Image = ({
                       height: '24'
                     })}
                   </Margin>
-                  <A to={`/images/${name}/summary`} component={Link}>
+                  <A to={`/images/${id}/summary`} component={Link}>
                     {name}
                   </A>
                 </Flex>
@@ -116,11 +122,10 @@ export const Image = ({
               </Content>
               <PopoverContainer clickable>
                 <Actions>
-                  <PopoverTarget
-                    box
-                    style={{ borderLeft: '1px solid #D8D8D8' }}
-                  >
-                    <ActionsIcon />
+                  <PopoverTarget box>
+                    <ActionsWrapper alignCenter justifyCenter>
+                      <ActionsIcon />
+                    </ActionsWrapper>
                   </PopoverTarget>
                   <Popover placement="bottom">
                     <PopoverItem disabled={false} onClick={onCreateInstance}>
diff --git a/packages/my-joy-images/src/components/summary.js b/packages/my-joy-images/src/components/summary.js
index fdfaee89..77532463 100644
--- a/packages/my-joy-images/src/components/summary.js
+++ b/packages/my-joy-images/src/components/summary.js
@@ -117,7 +117,7 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
                   <Button
                     type="button"
                     href={`${GLOBAL.origin}/instances/~create/?image=${
-                      image.name
+                      image.id
                     }`}
                     target="__blank"
                     rel="noopener noreferrer"
diff --git a/packages/my-joy-images/src/containers/create.js b/packages/my-joy-images/src/containers/create.js
index 978cd280..929c5aa8 100644
--- a/packages/my-joy-images/src/containers/create.js
+++ b/packages/my-joy-images/src/containers/create.js
@@ -97,20 +97,15 @@ export default compose(
     options: ({ match }) => ({
       ssr: false,
       variables: {
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
       }
     }),
-    props: ({ data: { loading, error, variables, ...rest } }) => {
+    props: ({ data: { loading, error, machine, variables, ...rest } }) => {
       const notFoundMsg = `Instance "${variables.name}" not found!`;
-      const inst = find(get(rest, 'machines.results', []), [
-        'name',
-        variables.name
-      ]);
-
-      const notFound = !loading && !inst ? notFoundMsg : false;
+      const notFound = !loading && !machine ? notFoundMsg : false;
 
       return {
-        instance: inst,
+        instance: machine,
         loadingError: error ? parseError(error) : notFound,
         loading
       };
@@ -190,7 +185,7 @@ export default compose(
         const { data } = res;
         const { createImageFromMachine } = data;
 
-        history.push(`/images/${createImageFromMachine.name}`);
+        history.push(`/images/${createImageFromMachine.id}`);
       }
     };
   })
diff --git a/packages/my-joy-images/src/containers/menu.js b/packages/my-joy-images/src/containers/menu.js
index 125a7ee0..345fff8f 100644
--- a/packages/my-joy-images/src/containers/menu.js
+++ b/packages/my-joy-images/src/containers/menu.js
@@ -9,12 +9,12 @@ const SECTIONS = [
 ];
 
 export default ({ match }) => {
-  const imageSlug = get(match, 'params.image');
-  const sections = imageSlug !== '~create' ? SECTIONS : [];
+  const imageId = get(match, 'params.image');
+  const sections = imageId !== '~create' ? SECTIONS : [];
 
   const links = sections.map(({ name, pathname }) => ({
     name,
-    pathname: `/images/${imageSlug}/${pathname}`
+    pathname: `/images/${imageId}/${pathname}`
   }));
 
   return <Menu links={links} />;
diff --git a/packages/my-joy-images/src/containers/summary.js b/packages/my-joy-images/src/containers/summary.js
index 30de65a7..812e8cb0 100644
--- a/packages/my-joy-images/src/containers/summary.js
+++ b/packages/my-joy-images/src/containers/summary.js
@@ -69,16 +69,17 @@ export default compose(
     options: ({ match }) => ({
       ssr: false,
       variables: {
-        name: get(match, 'params.image')
+        id: get(match, 'params.image')
       }
     }),
-    props: ({
-      data: { loading = false, error = null, variables, ...rest }
-    }) => ({
-      image: find(get(rest, 'images', []), ['name', variables.name]),
-      loading,
-      error
-    })
+    props: ({ data }) => {
+      const { loading = false, error = null, image } = data;
+      return {
+        image,
+        loading,
+        error
+      };
+    }
   }),
   connect(
     ({ values }, ownProps) => {
diff --git a/packages/my-joy-images/src/containers/tags.js b/packages/my-joy-images/src/containers/tags.js
index 2d0d5ada..8096becd 100644
--- a/packages/my-joy-images/src/containers/tags.js
+++ b/packages/my-joy-images/src/containers/tags.js
@@ -129,19 +129,12 @@ export default compose(
       fetchPolicy: 'network-only',
       pollInterval: 1000,
       variables: {
-        name: get(match, 'params.image')
+        id: get(match, 'params.image')
       }
     }),
     props: ({ data }) => {
-      const {
-        loading = false,
-        error = null,
-        variables,
-        refetch,
-        ...rest
-      } = data;
+      const { loading = false, error = null, image, refetch, ...rest } = data;
 
-      const image = find(get(rest, 'images', []), ['name', variables.name]);
       const tags = get(image || {}, 'tags', []);
       const index = new Fuse(tags, {
         keys: ['name', 'value']
diff --git a/packages/my-joy-images/src/graphql/get-image.gql b/packages/my-joy-images/src/graphql/get-image.gql
index df298c7f..0f8e2ac4 100644
--- a/packages/my-joy-images/src/graphql/get-image.gql
+++ b/packages/my-joy-images/src/graphql/get-image.gql
@@ -1,5 +1,5 @@
-query image($name: String) {
-  images(name: $name) {
+query image($id: ID) {
+  image(id: $id) {
     id
     name
     os
diff --git a/packages/my-joy-images/src/graphql/get-instance.gql b/packages/my-joy-images/src/graphql/get-instance.gql
index fb0c0e2d..2c44d41c 100644
--- a/packages/my-joy-images/src/graphql/get-instance.gql
+++ b/packages/my-joy-images/src/graphql/get-instance.gql
@@ -1,8 +1,6 @@
-query instance($name: String) {
-  machines(name: $name) {
-    results {
-      id
-      name
-    }
+query instance($id: ID) {
+  machine(id: $id) {
+    id
+    name
   }
 }
diff --git a/packages/my-joy-images/src/graphql/get-tags.gql b/packages/my-joy-images/src/graphql/get-tags.gql
index 76bbbcfb..93c52c7b 100644
--- a/packages/my-joy-images/src/graphql/get-tags.gql
+++ b/packages/my-joy-images/src/graphql/get-tags.gql
@@ -1,5 +1,5 @@
-query image($name: String) {
-  images(name: $name) {
+query image($id: ID) {
+  image(id: $id) {
     id
     name
     tags {
diff --git a/packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
index cb571f06..fd0afba6 100644
--- a/packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -4548,12 +4548,15 @@ exports[`renders <Item /> without throwing 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }
 
 .c20 {
-  width: 3rem;
   height: 3rem;
-  min-width: 3rem;
 }
 
 @media only screen and (min-width:47.9375rem) {
@@ -4632,7 +4635,7 @@ exports[`renders <Item /> without throwing 1`] = `
       >
         <a
           className="c11 c12 c13"
-          to="/instances/undefined"
+          to="/instances/"
         />
       </td>
       <td
@@ -5067,12 +5070,15 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }
 
 .c20 {
-  width: 3rem;
   height: 3rem;
-  min-width: 3rem;
 }
 
 @media only screen and (min-width:47.9375rem) {
@@ -5151,7 +5157,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
       >
         <a
           className="c11 c12 c13"
-          to="/instances/name"
+          to="/instances/id"
         >
           name
         </a>
@@ -5588,12 +5594,15 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }
 
 .c20 {
-  width: 3rem;
   height: 3rem;
-  min-width: 3rem;
 }
 
 @media only screen and (min-width:47.9375rem) {
@@ -5672,7 +5681,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
       >
         <a
           className="c11 c12 c13"
-          to="/instances/undefined"
+          to="/instances/"
         />
       </td>
       <td
@@ -6106,6 +6115,11 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }
 
 @media only screen and (min-width:47.9375rem) {
@@ -6184,7 +6198,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
       >
         <a
           className="c11 c12 c13"
-          to="/instances/undefined"
+          to="/instances/"
         />
       </td>
       <td
diff --git a/packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap b/packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
index 2599fe1b..ebdc216f 100644
--- a/packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/packages/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -3569,7 +3569,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
               <a
                 className="c18 c19 c20 c21"
                 data-ui-button="true"
-                href="http://localhost/images/~create/undefined"
+                href="http://localhost/images/~create/2252839a-e698-ceec-afac-9549ad0c6624"
                 icon={true}
                 rel="noopener noreferrer"
                 target="__blank"
@@ -5975,7 +5975,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
               <a
                 className="c18 c19 c20 c21"
                 data-ui-button="true"
-                href="http://localhost/images/~create/undefined"
+                href="http://localhost/images/~create/2252839a-e698-ceec-afac-9549ad0c6624"
                 icon={true}
                 rel="noopener noreferrer"
                 target="__blank"
diff --git a/packages/my-joy-instances/src/components/instances/list.js b/packages/my-joy-instances/src/components/instances/list.js
index 20ddaa21..78d3ec3c 100644
--- a/packages/my-joy-instances/src/components/instances/list.js
+++ b/packages/my-joy-instances/src/components/instances/list.js
@@ -45,6 +45,11 @@ const A = styled(Anchor)`
   color: ${props => props.theme.text};
   text-decoration: none;
   font-weight: ${props => props.theme.font.weight.semibold};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 `;
 
 const ItemAnchor = styled(Anchor)`
@@ -54,9 +59,7 @@ const ItemAnchor = styled(Anchor)`
 `;
 
 const Actions = styled(Flex)`
-  width: ${remcalc(48)};
   height: ${remcalc(48)};
-  min-width: ${remcalc(48)};
 `;
 
 export const FetchingItem = () => (
@@ -88,7 +91,7 @@ export const Item = ({
       </FormGroup>
     </TableTd>
     <TableTd middle left>
-      <A to={`/instances/${name}`} component={Link}>
+      <A to={`/instances/${id}`} component={Link}>
         {name}
       </A>
     </TableTd>
@@ -129,7 +132,7 @@ export const Item = ({
             <PopoverDivider />
             <PopoverItem disabled={false} onClick={onCreateImage}>
               <ItemAnchor
-                href={`${GLOBAL.origin}/images/~create/${name}`}
+                href={`${GLOBAL.origin}/images/~create/${id}`}
                 target="__blank"
                 rel="noopener noreferrer"
               >
diff --git a/packages/my-joy-instances/src/components/instances/summary.js b/packages/my-joy-instances/src/components/instances/summary.js
index 31556335..0c180841 100644
--- a/packages/my-joy-instances/src/components/instances/summary.js
+++ b/packages/my-joy-instances/src/components/instances/summary.js
@@ -142,7 +142,7 @@ export default withTheme(
               <Row between="xs">
                 <Col xs={9}>
                   <Button
-                    href={`${GLOBAL.origin}/images/~create/${instance.name}`}
+                    href={`${GLOBAL.origin}/images/~create/${instance.id}`}
                     target="__blank"
                     rel="noopener noreferrer"
                     secondary
diff --git a/packages/my-joy-instances/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap b/packages/my-joy-instances/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap
index 2b12cd38..10a399eb 100644
--- a/packages/my-joy-instances/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap
+++ b/packages/my-joy-instances/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap
@@ -74,7 +74,7 @@ exports[`renders <Menu links /> without throwing 1`] = `
   list-style-type: none;
   padding: 0.8125rem 0rem;
   margin: 1.125rem 0 0 0;
-  max-height: 50px;
+  max-height: 3.125rem;
   overflow-x: auto;
   overflow-y: hidden;
   box-sizing: border-box;
diff --git a/packages/my-joy-instances/src/containers/create-instance/image.js b/packages/my-joy-instances/src/containers/create-instance/image.js
index afa4a903..291fc801 100644
--- a/packages/my-joy-instances/src/containers/create-instance/image.js
+++ b/packages/my-joy-instances/src/containers/create-instance/image.js
@@ -169,9 +169,9 @@ export default compose(
     })
   ),
   graphql(GetImages, {
-    options: () => ({
+    options: ({ query }) => ({
       ssr: false,
-      variables: { public: true }
+      variables: { public: !query.image }
     }),
     props: ({ ownProps, data }) => {
       const { image = '', query } = ownProps;
@@ -180,7 +180,7 @@ export default compose(
       if (query.image) {
         return {
           loading,
-          image: find(images, ['name', query.image], {}),
+          image: find(images, ['id', query.image], {}),
           hardcoded: true
         };
       }
diff --git a/packages/my-joy-instances/src/containers/create-instance/index.js b/packages/my-joy-instances/src/containers/create-instance/index.js
index 469d8342..e0f822b2 100644
--- a/packages/my-joy-instances/src/containers/create-instance/index.js
+++ b/packages/my-joy-instances/src/containers/create-instance/index.js
@@ -367,7 +367,7 @@ export default compose(
         }
 
         dispatch([destroyAll(), forms.map(name => destroy(name))]);
-        history.push(`/instances/${res.data.createMachine.name}`);
+        history.push(`/instances/${res.data.createMachine.id}`);
       }
     };
   })
diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
index 10f85a77..28d96059 100644
--- a/packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -3526,12 +3526,15 @@ exports[`renders <List instances /> without throwing 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }
 
 .c42 {
-  width: 3rem;
   height: 3rem;
-  min-width: 3rem;
 }
 
 @media only screen and (min-width:48em) {
@@ -3800,7 +3803,7 @@ exports[`renders <List instances /> without throwing 1`] = `
           >
             <div
               className="c19 baseline-jVaZNU c19 c4"
-              name=""
+              name="2252839a"
               role="group"
               style={undefined}
             >
@@ -3840,9 +3843,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             <a
               className="c34 c35 c36"
               to="/instances/2252839a"
-            >
-              2252839a
-            </a>
+            />
           </td>
           <td
             className="c33"
@@ -3875,7 +3876,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             selected={undefined}
           >
             <code>
-              
+              2252839
             </code>
           </td>
           <td
@@ -3936,7 +3937,7 @@ exports[`renders <List instances /> without throwing 1`] = `
           >
             <div
               className="c19 baseline-jVaZNU c19 c4"
-              name=""
+              name="f1bd1730"
               role="group"
               style={undefined}
             >
@@ -3976,9 +3977,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             <a
               className="c34 c35 c36"
               to="/instances/f1bd1730"
-            >
-              f1bd1730
-            </a>
+            />
           </td>
           <td
             className="c33"
@@ -4011,7 +4010,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             selected={undefined}
           >
             <code>
-              
+              f1bd173
             </code>
           </td>
           <td
@@ -5731,12 +5730,15 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }
 
 .c42 {
-  width: 3rem;
   height: 3rem;
-  min-width: 3rem;
 }
 
 @media only screen and (min-width:48em) {
@@ -6105,7 +6107,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           >
             <a
               className="c34 c35 c36"
-              to="/instances/2252839a"
+              to="/instances/2252839a-e698-ceec-afac-9549ad0c6624"
             >
               2252839a
             </a>
@@ -6241,7 +6243,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           >
             <a
               className="c34 c35 c36"
-              to="/instances/f1bd1730"
+              to="/instances/f1bd1730-e8a6-4956-e738-d8e85cc6aa04"
             >
               f1bd1730
             </a>
@@ -8325,12 +8327,15 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }
 
 .c42 {
-  width: 3rem;
   height: 3rem;
-  min-width: 3rem;
 }
 
 @media only screen and (min-width:48em) {
@@ -8699,7 +8704,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           >
             <a
               className="c34 c35 c36"
-              to="/instances/2252839a"
+              to="/instances/2252839a-e698-ceec-afac-9549ad0c6624"
             >
               2252839a
             </a>
@@ -8835,7 +8840,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           >
             <a
               className="c34 c35 c36"
-              to="/instances/f1bd1730"
+              to="/instances/f1bd1730-e8a6-4956-e738-d8e85cc6aa04"
             >
               f1bd1730
             </a>
@@ -11132,12 +11137,15 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
 }
 
 .c42 {
-  width: 3rem;
   height: 3rem;
-  min-width: 3rem;
 }
 
 @media only screen and (min-width:48em) {
@@ -11506,7 +11514,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           >
             <a
               className="c34 c35 c36"
-              to="/instances/2252839a"
+              to="/instances/2252839a-e698-ceec-afac-9549ad0c6624"
             >
               2252839a
             </a>
@@ -11642,7 +11650,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           >
             <a
               className="c34 c35 c36"
-              to="/instances/f1bd1730"
+              to="/instances/f1bd1730-e8a6-4956-e738-d8e85cc6aa04"
             >
               f1bd1730
             </a>
diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap b/packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
index 762c2cde..765609e9 100644
--- a/packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -2485,7 +2485,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
                 <a
                   className="c19 c20 c21 c22"
                   data-ui-button="true"
-                  href="http://localhost/images/~create/undefined"
+                  href="http://localhost/images/~create/2252839a-e698-ceec-afac-9549ad0c6624"
                   icon={true}
                   rel="noopener noreferrer"
                   target="__blank"
@@ -4929,7 +4929,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
                 <a
                   className="c19 c20 c21 c22"
                   data-ui-button="true"
-                  href="http://localhost/images/~create/undefined"
+                  href="http://localhost/images/~create/2252839a-e698-ceec-afac-9549ad0c6624"
                   icon={true}
                   rel="noopener noreferrer"
                   target="__blank"
diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/list.spec.js b/packages/my-joy-instances/src/containers/instances/__tests__/list.spec.js
index a1d9924c..0f6214c5 100644
--- a/packages/my-joy-instances/src/containers/instances/__tests__/list.spec.js
+++ b/packages/my-joy-instances/src/containers/instances/__tests__/list.spec.js
@@ -44,11 +44,11 @@ it('renders <List error /> without throwing', () => {
 it('renders <List instances /> without throwing', () => {
   const instances = [
     {
-      name: '2252839a',
+      id: '2252839a',
       status: 'RUNNING'
     },
     {
-      name: 'f1bd1730',
+      id: 'f1bd1730',
       status: 'STOPPED'
     }
   ];
diff --git a/packages/my-joy-instances/src/containers/instances/cns.js b/packages/my-joy-instances/src/containers/instances/cns.js
index 77953307..b71a6dc2 100644
--- a/packages/my-joy-instances/src/containers/instances/cns.js
+++ b/packages/my-joy-instances/src/containers/instances/cns.js
@@ -147,19 +147,16 @@ export default compose(
       ssr: false,
       variables: {
         fetchPolicy: 'network-only',
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
       }
     }),
     props: ({ data }) => {
-      const { loading, error, variables, refetch, ...rest } = data;
-      const { name } = variables;
-
-      const instance = find(get(rest, 'machines.results', []), ['name', name]);
-      const tags = get(instance, 'tags', []);
+      const { loading, error, machine, refetch } = data;
+      const tags = get(machine, 'tags', []);
 
       return {
         tags,
-        instance,
+        instance: machine,
         loading,
         loadingError: error,
         refetch
diff --git a/packages/my-joy-instances/src/containers/instances/firewall.js b/packages/my-joy-instances/src/containers/instances/firewall.js
index 37c651c4..d5f0db0e 100644
--- a/packages/my-joy-instances/src/containers/instances/firewall.js
+++ b/packages/my-joy-instances/src/containers/instances/firewall.js
@@ -8,7 +8,6 @@ import { SubmissionError } from 'redux-form';
 import { Margin } from 'styled-components-spacing';
 import remcalc from 'remcalc';
 import isBoolean from 'lodash.isboolean';
-import find from 'lodash.find';
 import get from 'lodash.get';
 
 import {
@@ -138,22 +137,20 @@ export default compose(
       ssr: false,
       variables: {
         fetchPolicy: 'network-only',
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
       }
     }),
     props: ({ data }) => {
-      const { loading, error, variables, refetch, ...rest } = data;
-      const { name } = variables;
+      const { loading, error, machine } = data;
 
-      const instance = find(get(rest, 'machines.results', []), ['name', name]);
-      const enabled = get(instance, 'firewall_enabled');
-      const rules = get(instance, 'firewall_rules', []);
+      const enabled = get(machine, 'firewall_enabled');
+      const rules = get(machine, 'firewall_rules', []);
 
       return {
         enabled,
         defaultRules: rules.filter(({ rule_obj = {} }) => rule_obj.isWildcard),
         tagRules: rules.filter(({ rule_obj = {} }) => rule_obj.tags.length),
-        instance,
+        instance: machine,
         loading,
         loadingError: error
       };
diff --git a/packages/my-joy-instances/src/containers/instances/list.js b/packages/my-joy-instances/src/containers/instances/list.js
index 2b35fc0d..6c341cb3 100644
--- a/packages/my-joy-instances/src/containers/instances/list.js
+++ b/packages/my-joy-instances/src/containers/instances/list.js
@@ -121,17 +121,15 @@ export const List = ({
           total={total}
         >
           {fetching ? <InstanceListFetchingItem /> : null}
-          {(!fetching ? _instances : []).map(({ name, id, ...rest }) => (
+          {(!fetching ? _instances : []).map(instance => (
             <InstanceListItem
-              key={id}
-              id={id}
-              name={name}
-              {...rest}
-              onCreateImage={() => handleCreateImage(rest)}
-              onStart={() => handleStart([{ id }])}
-              onStop={() => handleStop([{ id }])}
-              onReboot={() => handleReboot([{ id }])}
-              onRemove={() => handleRemove([{ id }])}
+              key={instance.id}
+              {...instance}
+              onCreateImage={() => handleCreateImage(instance)}
+              onStart={() => handleStart([instance])}
+              onStop={() => handleStop([instance])}
+              onReboot={() => handleReboot([instance])}
+              onRemove={() => handleRemove([instance])}
             />
           ))}
         </InstanceList>
@@ -299,9 +297,9 @@ export default compose(
       };
     },
     (dispatch, { refetch, ...ownProps }) => ({
-      handleCreateImage: ({ name }) => {
+      handleCreateImage: ({ id }) => {
         return window
-          .open(`${GLOBAL.origin}/images/~create/${name}`, '_blank')
+          .open(`${GLOBAL.origin}/images/~create/${id}`, '_blank')
           .focus();
       },
       handleSortBy: ({ sortBy: currentSortBy, sortOrder }) => newSortBy => {
diff --git a/packages/my-joy-instances/src/containers/instances/metadata.js b/packages/my-joy-instances/src/containers/instances/metadata.js
index e22f59f7..625eb035 100644
--- a/packages/my-joy-instances/src/containers/instances/metadata.js
+++ b/packages/my-joy-instances/src/containers/instances/metadata.js
@@ -161,14 +161,11 @@ export default compose(
       ssr: false,
       pollInterval: 1000,
       variables: {
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
       }
     }),
-    props: ({ data: { loading, error, variables, refetch, ...rest } }) => {
-      const { name } = variables;
-
-      const instance = find(get(rest, 'machines.results', []), ['name', name]);
-      const values = get(instance, 'metadata', []).filter(
+    props: ({ data: { loading, error, machine, refetch, ...rest } }) => {
+      const values = get(machine, 'metadata', []).filter(
         ({ name = '' }) => name !== 'user-script'
       );
 
@@ -188,7 +185,7 @@ export default compose(
       return {
         index,
         metadata,
-        instance,
+        instance: machine,
         loading,
         error,
         refetch
diff --git a/packages/my-joy-instances/src/containers/instances/networks.js b/packages/my-joy-instances/src/containers/instances/networks.js
index 20ac0ee7..8823f6fc 100644
--- a/packages/my-joy-instances/src/containers/instances/networks.js
+++ b/packages/my-joy-instances/src/containers/instances/networks.js
@@ -82,15 +82,15 @@ export default compose(
   graphql(GetNetworks, {
     options: ({ match }) => ({
       variables: {
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
       }
     }),
     props: ({ data }) => {
       const { loading, error, variables } = data;
-      const { name } = variables;
+      const { id } = variables;
 
       const machines = get(data, 'machines.results', []);
-      const instance = find(forceArray(machines), ['name', name]);
+      const instance = find(forceArray(machines), ['id', id]);
       const values = get(instance, 'networks', []);
       const networks = reverse(sortBy(values, 'public'));
 
diff --git a/packages/my-joy-instances/src/containers/instances/snapshots.js b/packages/my-joy-instances/src/containers/instances/snapshots.js
index cc92edfc..06518eea 100644
--- a/packages/my-joy-instances/src/containers/instances/snapshots.js
+++ b/packages/my-joy-instances/src/containers/instances/snapshots.js
@@ -171,13 +171,11 @@ export default compose(
       ssr: false,
       pollInterval: 1000,
       variables: {
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
       }
     }),
-    props: ({ data: { loading, error, variables, refetch, ...rest } }) => {
-      const { name } = variables;
-      const instance = find(get(rest, 'machines.results', []), ['name', name]);
-      const snapshots = get(instance, 'snapshots', []);
+    props: ({ data: { loading, error, machine, refetch, ...rest } }) => {
+      const snapshots = get(machine, 'snapshots', []);
 
       const index = new Fuse(snapshots, {
         keys: ['name', 'status', 'created']
@@ -186,7 +184,7 @@ export default compose(
       return {
         index,
         snapshots,
-        instance,
+        instance: machine,
         loading,
         error,
         refetch
diff --git a/packages/my-joy-instances/src/containers/instances/summary.js b/packages/my-joy-instances/src/containers/instances/summary.js
index 606eb63c..7034b476 100644
--- a/packages/my-joy-instances/src/containers/instances/summary.js
+++ b/packages/my-joy-instances/src/containers/instances/summary.js
@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import { set } from 'react-redux-values';
 import { Margin } from 'styled-components-spacing';
 import intercept from 'apr-intercept';
-import find from 'lodash.find';
 import isArray from 'lodash.isarray';
 import some from 'lodash.some';
 import isInteger from 'lodash.isinteger';
@@ -142,17 +141,12 @@ export default compose(
       ssr: false,
       pollInterval: 1000,
       variables: {
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
       }
     }),
-    props: ({ data: { loading, error, variables, ...rest } }) => {
-      let instance = find(get(rest, 'machines.results', []), [
-        'name',
-        variables.name
-      ]);
-
-      if (instance) {
-        const { ips } = instance;
+    props: ({ data: { loading, error, machine, ...rest } }) => {
+      if (machine) {
+        const { ips } = machine;
 
         const grupedIps = ips
           .map(ip => ({ ip, openness: isPrivate(ip) ? 'private' : 'public' }))
@@ -164,11 +158,11 @@ export default compose(
             {}
           );
 
-        instance = Object.assign({}, instance, { ips: grupedIps });
+        machine = Object.assign({}, machine, { ips: grupedIps });
       }
 
       return {
-        instance,
+        instance: machine,
         loading,
         loadingError: error
       };
diff --git a/packages/my-joy-instances/src/containers/instances/tags.js b/packages/my-joy-instances/src/containers/instances/tags.js
index b7519322..cdb50632 100644
--- a/packages/my-joy-instances/src/containers/instances/tags.js
+++ b/packages/my-joy-instances/src/containers/instances/tags.js
@@ -152,14 +152,11 @@ export default compose(
       ssr: false,
       pollInterval: 1000,
       variables: {
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
       }
     }),
-    props: ({ data: { loading, error, variables, refetch, ...rest } }) => {
-      const { name } = variables;
-
-      const instance = find(get(rest, 'machines.results', []), ['name', name]);
-      const tags = get(instance, 'tags', []).filter(
+    props: ({ data: { loading, error, machine, refetch, ...rest } }) => {
+      const tags = get(machine, 'tags', []).filter(
         ({ name = '' }) => !/^triton\.cns\./i.test(name)
       );
 
@@ -169,7 +166,7 @@ export default compose(
 
       return {
         tags,
-        instance,
+        instance: machine,
         index,
         loading,
         error,
diff --git a/packages/my-joy-instances/src/containers/instances/user-script.js b/packages/my-joy-instances/src/containers/instances/user-script.js
index 1c6e7147..932dc75e 100644
--- a/packages/my-joy-instances/src/containers/instances/user-script.js
+++ b/packages/my-joy-instances/src/containers/instances/user-script.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { compose, graphql } from 'react-apollo';
 import { Margin } from 'styled-components-spacing';
-import find from 'lodash.find';
 import get from 'lodash.get';
 
 import {
@@ -57,21 +56,19 @@ export default compose(
       ssr: false,
       variables: {
         fetchPolicy: 'network-only',
-        name: get(match, 'params.instance')
+        id: get(match, 'params.instance')
       }
     }),
     props: ({ data }) => {
-      const { loading, error, variables, refetch, ...rest } = data;
-      const { name } = variables;
+      const { loading, error, machine } = data;
 
-      const instance = find(get(rest, 'machines.results', []), ['name', name]);
-      const metadata = get(instance, 'metadata', [])
+      const metadata = get(machine, 'metadata', [])
         .filter(({ name = '' }) => name === 'user-script')
         .shift();
 
       return {
         metadata,
-        instance,
+        instance: machine,
         loading,
         error
       };
diff --git a/packages/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap b/packages/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
index 67d1f07c..5da03cf4 100644
--- a/packages/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
+++ b/packages/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
@@ -103,7 +103,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 }
 
 .c0 {
-  border-bottom: 1px solid rgb(216,216,216);
+  border-bottom: 0.0625rem solid rgb(216,216,216);
 }
 
 @media only screen and (min-width:48em) {
@@ -322,7 +322,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
 }
 
 .c0 {
-  border-bottom: 1px solid rgb(216,216,216);
+  border-bottom: 0.0625rem solid rgb(216,216,216);
 }
 
 @media only screen and (min-width:48em) {
diff --git a/packages/my-joy-instances/src/containers/navigation/menu.js b/packages/my-joy-instances/src/containers/navigation/menu.js
index 6c77485f..e1c2d3a1 100644
--- a/packages/my-joy-instances/src/containers/navigation/menu.js
+++ b/packages/my-joy-instances/src/containers/navigation/menu.js
@@ -4,13 +4,13 @@ import get from 'lodash.get';
 import { Menu } from '@components/navigation';
 
 export default connect((state, { match }) => {
-  const instanceSlug = get(match, 'params.instance');
+  const instanceId = get(match, 'params.instance');
   const allSections = get(state, 'ui.sections');
-  const sections = instanceSlug ? allSections.instances : [];
+  const sections = instanceId ? allSections.instances : [];
 
   const links = sections.map(({ name, pathname }) => ({
     name,
-    pathname: `/instances/${instanceSlug}/${pathname}`
+    pathname: `/instances/${instanceId}/${pathname}`
   }));
 
   return {
diff --git a/packages/my-joy-instances/src/graphql/get-instance.gql b/packages/my-joy-instances/src/graphql/get-instance.gql
index 0bc3c511..9d882e5b 100644
--- a/packages/my-joy-instances/src/graphql/get-instance.gql
+++ b/packages/my-joy-instances/src/graphql/get-instance.gql
@@ -1,25 +1,23 @@
-query instance($name: String) {
-  machines(name: $name) {
-    results {
+query instance($id: ID) {
+  machine(id: $id) {
+    id
+    state
+    brand
+    name
+    created
+    updated
+    primary_ip
+    ips
+    docker
+    dns_names
+    compute_node
+    image {
+      id
+      name
+    }
+    package {
       id
-      state
-      brand
       name
-      created
-      updated
-      primary_ip
-      ips
-      docker
-      dns_names
-      compute_node
-      image {
-        id
-        name
-      }
-      package {
-        id
-        name
-      }
     }
   }
 }
diff --git a/packages/my-joy-instances/src/graphql/list-instance-fw-rules.gql b/packages/my-joy-instances/src/graphql/list-instance-fw-rules.gql
index 8e8bc493..cccbac49 100644
--- a/packages/my-joy-instances/src/graphql/list-instance-fw-rules.gql
+++ b/packages/my-joy-instances/src/graphql/list-instance-fw-rules.gql
@@ -1,17 +1,15 @@
-query instance($name: String!) {
-  machines(name: $name) {
-    results {
+query instance($id: ID!) {
+  machine(id: $id) {
+    id
+    name
+    firewall_enabled
+    firewall_rules {
       id
-      name
-      firewall_enabled
-      firewall_rules {
-        id
-        enabled
-        rule_str
-        rule_obj
-        global
-        description
-      }
+      enabled
+      rule_str
+      rule_obj
+      global
+      description
     }
   }
 }
diff --git a/packages/my-joy-instances/src/graphql/list-instance-networks.gql b/packages/my-joy-instances/src/graphql/list-instance-networks.gql
index a7e08e38..107b2115 100644
--- a/packages/my-joy-instances/src/graphql/list-instance-networks.gql
+++ b/packages/my-joy-instances/src/graphql/list-instance-networks.gql
@@ -1,24 +1,22 @@
-query instance($name: String!) {
-  machines(name: $name) {
-    results {
+query instance($id: ID!) {
+  machine(id: $id) {
+    id
+    name
+    networks {
       id
       name
-      networks {
+      public
+      fabric
+      description
+      subnet
+      provision_start_ip
+      provision_end_ip
+      gateway
+      resolvers
+      internet_nat
+      machines {
         id
         name
-        public
-        fabric
-        description
-        subnet
-        provision_start_ip
-        provision_end_ip
-        gateway
-        resolvers
-        internet_nat
-        machines {
-          id
-          name
-        }
       }
     }
   }
diff --git a/packages/my-joy-instances/src/graphql/list-metadata.gql b/packages/my-joy-instances/src/graphql/list-metadata.gql
index a57c02d4..f197d774 100644
--- a/packages/my-joy-instances/src/graphql/list-metadata.gql
+++ b/packages/my-joy-instances/src/graphql/list-metadata.gql
@@ -1,13 +1,11 @@
-query instance($name: String!) {
-  machines(name: $name) {
-    results {
+query metadata($id: ID!) {
+  machine(id: $id) {
+    id
+    name
+    metadata {
       id
       name
-      metadata {
-        id
-        name
-        value
-      }
+      value
     }
   }
 }
diff --git a/packages/my-joy-instances/src/graphql/list-snapshots.gql b/packages/my-joy-instances/src/graphql/list-snapshots.gql
index 06ede78d..b7ba47d1 100644
--- a/packages/my-joy-instances/src/graphql/list-snapshots.gql
+++ b/packages/my-joy-instances/src/graphql/list-snapshots.gql
@@ -1,15 +1,13 @@
-query instance($name: String!) {
-  machines(name: $name) {
-    results {
+query instance($id: ID!) {
+  machine(id: $id) {
+    id
+    name
+    snapshots {
       id
       name
-      snapshots {
-        id
-        name
-        state
-        created
-        updated
-      }
+      state
+      created
+      updated
     }
   }
 }
diff --git a/packages/my-joy-instances/src/graphql/list-tags.gql b/packages/my-joy-instances/src/graphql/list-tags.gql
index 6a804e63..70e8ebd5 100644
--- a/packages/my-joy-instances/src/graphql/list-tags.gql
+++ b/packages/my-joy-instances/src/graphql/list-tags.gql
@@ -1,13 +1,11 @@
-query instance($name: String!) {
-  machines(name: $name) {
-    results {
+query instance($id: ID!) {
+  machine(id: $id) {
+    id
+    name
+    tags {
       id
       name
-      tags {
-        id
-        name
-        value
-      }
+      value
     }
   }
 }
diff --git a/packages/ui-toolkit/src/base/global.js b/packages/ui-toolkit/src/base/global.js
index ecf030b6..470d373e 100644
--- a/packages/ui-toolkit/src/base/global.js
+++ b/packages/ui-toolkit/src/base/global.js
@@ -49,7 +49,7 @@ export default ({ theme }) => css`
   }
 
   .CodeMirror {
-    border: solid 1px ${theme.grey};
+    border: solid ${remcalc(1)} ${theme.grey};
     margin: ${remcalc(8)} 0 ${remcalc(8)} 0;
     font-family: "Roboto Mono", monospace !important;
   }
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 1969db64..463d7f4a 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
@@ -103,7 +103,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
 }
 
 .c0 {
-  border-bottom: 1px solid rgb(216,216,216);
+  border-bottom: 0.0625rem solid rgb(216,216,216);
 }
 
 @media only screen and (min-width:48em) {
diff --git a/packages/ui-toolkit/src/breadcrumb/index.js b/packages/ui-toolkit/src/breadcrumb/index.js
index e590f25d..8c669782 100644
--- a/packages/ui-toolkit/src/breadcrumb/index.js
+++ b/packages/ui-toolkit/src/breadcrumb/index.js
@@ -2,11 +2,12 @@ import React from 'react';
 import styled from 'styled-components';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { Padding } from 'styled-components-spacing';
+import remcalc from 'remcalc';
 
 import Container from '../layout/view-container';
 
 const BreadcrumContianer = styled(Container)`
-  border-bottom: 1px solid ${props => props.theme.grey};
+  border-bottom: ${remcalc(1)} solid ${props => props.theme.grey};
 `;
 
 /**
diff --git a/packages/ui-toolkit/src/button/group.js b/packages/ui-toolkit/src/button/group.js
index 0a201b76..835d15b1 100644
--- a/packages/ui-toolkit/src/button/group.js
+++ b/packages/ui-toolkit/src/button/group.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import remcalc from 'remcalc';
 
 export default styled.span`
   display: inline-block;
@@ -15,6 +16,6 @@ export default styled.span`
   & [data-ui-button='true']:not(:last-child) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    margin-right: -1px;
+    margin-right: ${remcalc(-1)};
   }
 `;
diff --git a/packages/ui-toolkit/src/section-list/__tests__/__snapshots__/section.spec.js.snap b/packages/ui-toolkit/src/section-list/__tests__/__snapshots__/section.spec.js.snap
index 61a6d46c..2f6eaaa6 100644
--- a/packages/ui-toolkit/src/section-list/__tests__/__snapshots__/section.spec.js.snap
+++ b/packages/ui-toolkit/src/section-list/__tests__/__snapshots__/section.spec.js.snap
@@ -275,7 +275,7 @@ exports[`SectionList SectionList 1`] = `
   list-style-type: none;
   padding: 0.8125rem 0rem;
   margin: 1.125rem 0 0 0;
-  max-height: 50px;
+  max-height: 3.125rem;
   overflow-x: auto;
   overflow-y: hidden;
   box-sizing: border-box;
diff --git a/packages/ui-toolkit/src/section-list/index.js b/packages/ui-toolkit/src/section-list/index.js
index 3cc90f1f..b870b97e 100644
--- a/packages/ui-toolkit/src/section-list/index.js
+++ b/packages/ui-toolkit/src/section-list/index.js
@@ -9,7 +9,7 @@ const UnorderedList = styled.ul`
   list-style-type: none;
   padding: ${remcalc(13)} ${remcalc(0)};
   margin: ${remcalc(18)} 0 0 0;
-  max-height: 50px;
+  max-height: ${remcalc(50)};
   overflow-x: auto;
   overflow-y: hidden;
   box-sizing: border-box;
diff --git a/yarn.lock b/yarn.lock
index a53ef8b7..274720ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2517,9 +2517,9 @@ clone@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.3.tgz#298d7e2231660f40c003c2ed3140decf3f53085f"
 
-cloudapi-gql@^7.1.1:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/cloudapi-gql/-/cloudapi-gql-7.1.2.tgz#9087a60a5e95de259f62f2495744c526ec55a76c"
+cloudapi-gql@^7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/cloudapi-gql/-/cloudapi-gql-7.1.3.tgz#bb963454dd68f6e36e2a44302456faecf97831aa"
   dependencies:
     apr-map "3.x.x"
     boom "7.x.x"