From 15213ba6cea50c9c67725444078fd50087441afa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Thu, 25 Jan 2018 17:07:20 +0000
Subject: [PATCH] fix(my-joy-beta): adjust select inputs width in affinity

fixes #1090
---
 .../__snapshots__/affinity.spec.js.snap       | 498 ++++++++++++++++--
 .../components/create-instance/affinity.js    |  10 +-
 packages/ui-toolkit/src/form/base/input.js    |   9 +-
 packages/ui-toolkit/src/theme/index.js        |  13 +-
 4 files changed, 480 insertions(+), 50 deletions(-)

diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap
index 2ac126e8..dad59c3a 100644
--- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap
@@ -44,7 +44,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   margin-bottom: 2rem;
 }
 
-.c8 {
+.c12 {
   margin-right: 0.25rem;
 }
 
@@ -76,6 +76,51 @@ exports[`renders <Rule/> without throwing 1`] = `
 }
 
 .c5 {
+  width: 4.125rem;
+  position: relative;
+  padding: 0.75rem;
+  padding-right: 1.5625rem;
+  width: auto;
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  color: rgb(216,216,216);
+  margin: 0 0.375rem;
+}
+
+.c7 {
+  width: 5.625rem;
+  position: relative;
+  padding: 0.75rem;
+  padding-right: 1.5625rem;
+  width: auto;
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  color: rgb(216,216,216);
+  margin: 0 0.375rem;
+}
+
+.c10 {
+  width: 7.5rem;
   position: relative;
   padding: 0.75rem;
   padding-right: 1.5625rem;
@@ -120,7 +165,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c9 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -156,41 +201,41 @@ exports[`renders <Rule/> without throwing 1`] = `
   outline: 0;
 }
 
-.c9::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c9:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c9:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -227,7 +272,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   right: 0.375rem;
 }
 
-.c7 {
+.c9 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -242,7 +287,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   margin-left: 0;
 }
 
-.c7:after {
+.c9:after {
   content: '';
   width: 0.625rem;
   height: 0.625rem;
@@ -256,7 +301,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   right: 0.75rem;
 }
 
-.c7:after {
+.c9:after {
   right: 0.375rem;
 }
 
@@ -285,6 +330,8 @@ exports[`renders <Rule/> without throwing 1`] = `
   appearance: none;
   min-height: 0;
   max-width: 22.1875rem;
+  width: 4.125rem;
+  max-width: 4.125rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -335,6 +382,160 @@ exports[`renders <Rule/> without throwing 1`] = `
   outline: 0;
 }
 
+.c8 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  max-width: 22.1875rem;
+  width: 5.625rem;
+  max-width: 5.625rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c8::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:invalid {
+  box-shadow: none;
+}
+
+.c8:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c8:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c11 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  max-width: 22.1875rem;
+  width: 7.5rem;
+  max-width: 7.5rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c11::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c11::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c11:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c11:invalid {
+  box-shadow: none;
+}
+
+.c11:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c11:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c11:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c11:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c11:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
 <div
   className="c0"
 >
@@ -356,12 +557,14 @@ exports[`renders <Rule/> without throwing 1`] = `
       <div
         className="c4"
         disabled={false}
+        width="4.125rem"
       >
         <select
           className="c5 c6"
           disabled={false}
           id="k"
           onBlur={undefined}
+          width="4.125rem"
         >
           <option
             value="must"
@@ -390,12 +593,14 @@ exports[`renders <Rule/> without throwing 1`] = `
       <div
         className="c4"
         disabled={false}
+        width="5.625rem"
       >
         <select
-          className="c5 c6"
+          className="c7 c8"
           disabled={false}
           id="l"
           onBlur={undefined}
+          width="5.625rem"
         >
           <option
             value="same"
@@ -422,14 +627,16 @@ exports[`renders <Rule/> without throwing 1`] = `
       style={undefined}
     >
       <div
-        className="c7"
+        className="c9"
         disabled={false}
+        width="7.5rem"
       >
         <select
-          className="c5 c6"
+          className="c10 c11"
           disabled={false}
           id="m"
           onBlur={undefined}
+          width="7.5rem"
         >
           <option
             value="name"
@@ -451,17 +658,19 @@ exports[`renders <Rule/> without throwing 1`] = `
       style={undefined}
     >
       <div
-        className="c8"
+        className="c12"
       >
         <div
           className="c4"
           disabled={false}
+          width="7.5rem"
         >
           <select
-            className="c5 c6"
+            className="c10 c11"
             disabled={false}
             id="n"
             onBlur={undefined}
+            width="7.5rem"
           >
             <option
               value="equalling"
@@ -499,7 +708,7 @@ exports[`renders <Rule/> without throwing 1`] = `
       style={undefined}
     >
       <input
-        className="c9"
+        className="c13"
         disabled={false}
         id="o"
         onBlur={null}
@@ -517,7 +726,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   margin-bottom: 2rem;
 }
 
-.c8 {
+.c12 {
   margin-right: 0.25rem;
 }
 
@@ -549,6 +758,51 @@ exports[`renders <Rule/> without throwing 2`] = `
 }
 
 .c5 {
+  width: 4.125rem;
+  position: relative;
+  padding: 0.75rem;
+  padding-right: 1.5625rem;
+  width: auto;
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  color: rgb(216,216,216);
+  margin: 0 0.375rem;
+}
+
+.c7 {
+  width: 5.625rem;
+  position: relative;
+  padding: 0.75rem;
+  padding-right: 1.5625rem;
+  width: auto;
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  color: rgb(216,216,216);
+  margin: 0 0.375rem;
+}
+
+.c10 {
+  width: 7.5rem;
   position: relative;
   padding: 0.75rem;
   padding-right: 1.5625rem;
@@ -593,7 +847,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   -webkit-padding-after: 0;
 }
 
-.c9 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -629,41 +883,41 @@ exports[`renders <Rule/> without throwing 2`] = `
   outline: 0;
 }
 
-.c9::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c9:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c9:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -700,7 +954,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   right: 0.375rem;
 }
 
-.c7 {
+.c9 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -715,7 +969,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   margin-left: 0;
 }
 
-.c7:after {
+.c9:after {
   content: '';
   width: 0.625rem;
   height: 0.625rem;
@@ -729,7 +983,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   right: 0.75rem;
 }
 
-.c7:after {
+.c9:after {
   right: 0.375rem;
 }
 
@@ -758,6 +1012,8 @@ exports[`renders <Rule/> without throwing 2`] = `
   appearance: none;
   min-height: 0;
   max-width: 22.1875rem;
+  width: 4.125rem;
+  max-width: 4.125rem;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -808,6 +1064,160 @@ exports[`renders <Rule/> without throwing 2`] = `
   outline: 0;
 }
 
+.c8 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  max-width: 22.1875rem;
+  width: 5.625rem;
+  max-width: 5.625rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c8::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:invalid {
+  box-shadow: none;
+}
+
+.c8:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c8:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c11 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  max-width: 22.1875rem;
+  width: 7.5rem;
+  max-width: 7.5rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c11::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c11::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c11:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c11:invalid {
+  box-shadow: none;
+}
+
+.c11:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c11:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c11:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c11:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c11:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
 <div
   className="c0"
 >
@@ -829,12 +1239,14 @@ exports[`renders <Rule/> without throwing 2`] = `
       <div
         className="c4"
         disabled={false}
+        width="4.125rem"
       >
         <select
           className="c5 c6"
           disabled={false}
           id="p"
           onBlur={undefined}
+          width="4.125rem"
         >
           <option
             value="must"
@@ -863,12 +1275,14 @@ exports[`renders <Rule/> without throwing 2`] = `
       <div
         className="c4"
         disabled={false}
+        width="5.625rem"
       >
         <select
-          className="c5 c6"
+          className="c7 c8"
           disabled={false}
           id="q"
           onBlur={undefined}
+          width="5.625rem"
         >
           <option
             value="same"
@@ -895,14 +1309,16 @@ exports[`renders <Rule/> without throwing 2`] = `
       style={undefined}
     >
       <div
-        className="c7"
+        className="c9"
         disabled={false}
+        width="7.5rem"
       >
         <select
-          className="c5 c6"
+          className="c10 c11"
           disabled={false}
           id="r"
           onBlur={undefined}
+          width="7.5rem"
         >
           <option
             value="name"
@@ -924,17 +1340,19 @@ exports[`renders <Rule/> without throwing 2`] = `
       style={undefined}
     >
       <div
-        className="c8"
+        className="c12"
       >
         <div
           className="c4"
           disabled={false}
+          width="7.5rem"
         >
           <select
-            className="c5 c6"
+            className="c10 c11"
             disabled={false}
             id="s"
             onBlur={undefined}
+            width="7.5rem"
           >
             <option
               value="equalling"
@@ -972,7 +1390,7 @@ exports[`renders <Rule/> without throwing 2`] = `
       style={undefined}
     >
       <input
-        className="c9"
+        className="c13"
         disabled={false}
         id="t"
         onBlur={null}
diff --git a/packages/my-joy-beta/src/components/create-instance/affinity.js b/packages/my-joy-beta/src/components/create-instance/affinity.js
index d6f00773..02ba305e 100644
--- a/packages/my-joy-beta/src/components/create-instance/affinity.js
+++ b/packages/my-joy-beta/src/components/create-instance/affinity.js
@@ -1,15 +1,15 @@
 import React, { Fragment } from 'react';
-
 import { Margin } from 'styled-components-spacing';
 import Flex from 'styled-flex-component';
 import { Field } from 'redux-form';
 import titleCase from 'title-case';
+import remcalc from 'remcalc';
 
 import { H5, Select, Input, FormGroup } from 'joyent-ui-toolkit';
 
 const Values = touched => (
   <Margin right={1}>
-    <Select embedded touched={touched}>
+    <Select touched={touched} embedded width={remcalc(120)}>
       <option value="equalling">equalling</option>
       <option value="not-equalling">not equalling</option>
       <option value="containing">containing</option>
@@ -26,7 +26,7 @@ export const Rule = rule => (
         The instance
       </H5>
       <FormGroup name="rule-instance-conditional" field={Field}>
-        <Select embedded touched={rule['rule-instance-conditional']}>
+        <Select touched={rule['rule-instance-conditional']} width={remcalc(66)} embedded>
           <option value="must">must</option>
           <option value="should">should</option>
         </Select>
@@ -35,7 +35,7 @@ export const Rule = rule => (
         be on
       </H5>
       <FormGroup name="rule-instance-placement" field={Field}>
-        <Select embedded touched={rule['rule-instance-placement']}>
+        <Select touched={rule['rule-instance-placement']} width={remcalc(90)} embedded>
           <option value="same">the same</option>
           <option value="different">a different</option>
         </Select>
@@ -44,7 +44,7 @@ export const Rule = rule => (
         node as the instance(s) identified by the
       </H5>
       <FormGroup name="rule-type" field={Field}>
-        <Select embedded left touched={rule['rule-type']}>
+        <Select touched={rule['rule-type']} width={remcalc(120)} embedded left>
           <option value="name">instance name</option>
           <option value="tag">tag</option>
         </Select>
diff --git a/packages/ui-toolkit/src/form/base/input.js b/packages/ui-toolkit/src/form/base/input.js
index 609d0f4e..4ff35168 100644
--- a/packages/ui-toolkit/src/form/base/input.js
+++ b/packages/ui-toolkit/src/form/base/input.js
@@ -91,11 +91,11 @@ const style = css`
   }
 
   ${is('small')`
-    width: ${remcalc(120)}
+    width: ${remcalc(120)};
   `};
 
   ${is('big')`
-    width: ${remcalc(355)}
+    width: ${remcalc(355)};
   `};
 
   ${is('monospace')`
@@ -161,6 +161,11 @@ const style = css`
     max-width: ${remcalc(355)};
   `};
 
+  ${is('width')`
+    width: ${props => props.width};
+    max-width: ${props => props.width};
+  `};
+
   ${is('mono')`
     font-family: monospace;
   `};
diff --git a/packages/ui-toolkit/src/theme/index.js b/packages/ui-toolkit/src/theme/index.js
index 9f094cbe..4058df23 100644
--- a/packages/ui-toolkit/src/theme/index.js
+++ b/packages/ui-toolkit/src/theme/index.js
@@ -86,8 +86,12 @@ export const font = {
   abbrBorderColor: base.secondary,
   textMuted: base.secondary,
   family: '"Libre Franklin"',
-  families: '"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif',
-  href: () => `${document.location.protocol}//${document.location.host}/fonts/css?family=Libre+Franklin:400,500,600`,
+  families:
+    '"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif',
+  href: () =>
+    `${document.location.protocol}//${
+      document.location.host
+    }/fonts/css?family=Libre+Franklin:400,500,600`,
   weight: {
     semibold: 600,
     medium: 500,
@@ -102,7 +106,10 @@ export const monoFont = {
   textMuted: base.secondary,
   family: '"Roboto Mono"',
   families: '"Roboto Mono", monospace',
-  href: () => `${document.location.protocol}//${document.location.host}/fonts/css?family=Roboto+Mono:700,400`,
+  href: () =>
+    `${document.location.protocol}//${
+      document.location.host
+    }/fonts/css?family=Roboto+Mono:700,400`,
   weight: {
     bold: 700,
     normal: 400