fix(ui-toolkit): overhaul components

fixes #1226

packages/my-joy-beta/src/components/__tests__/__snapshots__/cns.spec.js.snap

@@ -167,6 +167,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -181,8 +182,10 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -233,7 +236,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -541,6 +544,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -555,8 +559,10 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -607,7 +613,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -856,7 +862,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);

packages/my-joy-beta/src/components/__tests__/__snapshots__/firewall.spec.js.snap

@@ -5402,6 +5402,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -5606,6 +5607,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -5620,6 +5622,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -5860,6 +5863,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;

packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap

@@ -359,6 +359,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -373,8 +374,10 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -774,7 +777,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1683,6 +1686,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -1697,8 +1701,10 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -2098,7 +2104,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -2781,6 +2787,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -2795,8 +2802,10 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -3133,7 +3142,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -3194,7 +3203,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -3890,6 +3899,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -3904,8 +3914,10 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -4305,7 +4317,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -4975,6 +4987,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -4989,8 +5002,10 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -5371,7 +5386,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -6145,6 +6160,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -6159,8 +6175,10 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -6560,7 +6578,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -7336,6 +7354,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -7350,8 +7369,10 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -7751,7 +7772,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -8463,6 +8484,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -8477,8 +8499,10 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -8878,7 +8902,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);

packages/my-joy-beta/src/components/__tests__/__snapshots__/network.spec.js.snap

@@ -4638,6 +4638,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -4985,7 +4986,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);

packages/my-joy-beta/src/components/__tests__/__snapshots__/tags.spec.js.snap

@@ -376,6 +376,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -390,8 +391,10 @@ exports[`renders <AddForm /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -774,7 +777,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1461,6 +1464,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -1475,8 +1479,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -1840,7 +1846,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);

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

@@ -186,8 +186,10 @@ exports[`renders <Rule/> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -221,7 +223,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -363,7 +365,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -438,7 +440,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -513,7 +515,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -588,7 +590,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1065,8 +1067,10 @@ exports[`renders <Rule/> without throwing 2`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -1100,7 +1104,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1242,7 +1246,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1317,7 +1321,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1392,7 +1396,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1467,7 +1471,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);

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

@@ -220,7 +220,7 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);

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

@@ -226,6 +226,7 @@ exports[`renders <Name /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -240,8 +241,10 @@ exports[`renders <Name /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -293,7 +296,7 @@ exports[`renders <Name /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -658,6 +661,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -672,8 +676,10 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -725,7 +731,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1090,6 +1096,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -1104,8 +1111,10 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -1157,7 +1166,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1522,6 +1531,7 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -1536,8 +1546,10 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -1589,7 +1601,7 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);

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

@@ -277,6 +277,7 @@ exports[`renders <Filters /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -355,6 +356,11 @@ exports[`renders <Filters /> without throwing 1`] = `
   margin-bottom: 0.75rem;
 }
 
+.c8 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
 .c4 {
   list-style-type: none;
   display: -webkit-box;
@@ -1021,6 +1027,7 @@ exports[`renders <Package /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -1073,6 +1080,11 @@ exports[`renders <Package /> without throwing 1`] = `
   margin-left: 0.75rem;
 }
 
+.c8 label {
+  font-weight: normal;
+  font-size: 0.9375rem;
+}
+
 .c3 {
   display: inline-block;
   margin: 0;

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap

@@ -372,6 +372,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -386,8 +387,10 @@ exports[`renders <AddForm /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -724,7 +727,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -785,7 +788,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1494,6 +1497,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -1508,8 +1512,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -1837,7 +1843,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1898,7 +1904,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -236,6 +236,8 @@ exports[`renders <Summary /> without throwing 1`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -348,6 +350,8 @@ exports[`renders <Summary /> without throwing 1`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -608,6 +612,8 @@ exports[`renders <Summary /> without throwing 1`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -866,6 +872,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
 }
 
 .c30 {
@@ -876,6 +883,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -989,7 +997,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1068,7 +1076,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -2203,6 +2211,8 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2315,6 +2325,8 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2675,6 +2687,8 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2894,6 +2908,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
 }
 
 .c31 {
@@ -2904,6 +2919,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -3018,7 +3034,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -4432,6 +4448,8 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4544,6 +4562,8 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4904,6 +4924,8 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5123,6 +5145,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
 }
 
 .c31 {
@@ -5133,6 +5156,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -5247,7 +5271,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -6714,6 +6738,8 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6826,6 +6852,8 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -7086,6 +7114,8 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -7344,6 +7374,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
 }
 
 .c34 {
@@ -7354,6 +7385,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -7467,7 +7499,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -7546,7 +7578,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -8733,6 +8765,8 @@ exports[`renders <Summary state /> without throwing 1`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -8845,6 +8879,8 @@ exports[`renders <Summary state /> without throwing 1`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -9205,6 +9241,8 @@ exports[`renders <Summary state /> without throwing 1`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -9424,6 +9462,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
 }
 
 .c31 {
@@ -9434,6 +9473,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -9548,7 +9588,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -9627,7 +9667,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -10762,6 +10802,8 @@ exports[`renders <Summary state /> without throwing 2`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -10874,6 +10916,8 @@ exports[`renders <Summary state /> without throwing 2`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -11234,6 +11278,8 @@ exports[`renders <Summary state /> without throwing 2`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -11453,6 +11499,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
 }
 
 .c31 {
@@ -11463,6 +11510,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -11577,7 +11625,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -11656,7 +11704,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -12791,6 +12839,8 @@ exports[`renders <Summary state /> without throwing 3`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -12903,6 +12953,8 @@ exports[`renders <Summary state /> without throwing 3`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -13163,6 +13215,8 @@ exports[`renders <Summary state /> without throwing 3`] = `
   padding: 0.5625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -13421,6 +13475,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
 }
 
 .c30 {
@@ -13431,6 +13486,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -13545,7 +13601,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -13624,7 +13680,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap

@@ -164,6 +164,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -232,7 +233,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -502,6 +503,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -570,7 +572,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -862,6 +864,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -930,7 +933,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1200,6 +1203,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -1268,7 +1272,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1538,6 +1542,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -1606,7 +1611,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1876,6 +1881,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -1944,7 +1950,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -2214,6 +2220,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -2282,7 +2289,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);

packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap

@@ -33,10 +33,15 @@ exports[`renders <Menu links /> without throwing 1`] = `
 }
 
 .c3 {
-  display: inline-block;
   font-size: 0.9375rem;
   line-height: 1.6;
-  margin-right: 1.4375rem;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c3:not(:last-child) {
+  margin-right: 1.875rem;
 }
 
 .c4 {
@@ -44,17 +49,51 @@ exports[`renders <Menu links /> without throwing 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
+  padding: 0 0.375rem;
+  padding-bottom: 1rem;
+  position: relative;
 }
 
 .c4.active {
-  color: rgb(59,70,204);
+  font-weight: 600;
-  cursor: default;
+}
+
+.c4.active:after {
+  width: 100%;
+  height: 0.0625rem;
+  background: rgb(70,70,70);
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
 }
 
 .c2 {
+  background: rgb(250,250,250);
   list-style-type: none;
-  padding: 0;
+  padding: 0.8125rem 0.75rem;
   margin: 1.125rem 0 0 0;
+  min-width: 100%;
+  max-height: 50px;
+  overflow-x: scroll;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.c2:after {
+  width: 100%;
+  height: 0.0625rem;
+  background: rgb(216,216,216);
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
 }
 
 @media only screen and (min-width:48em) {

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

@@ -789,6 +789,7 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -803,8 +804,10 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -1141,7 +1144,7 @@ Array [
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1202,7 +1205,7 @@ Array [
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -2805,6 +2808,7 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -2819,8 +2823,10 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -3148,7 +3154,7 @@ Array [
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -3209,7 +3215,7 @@ Array [
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -3971,6 +3977,7 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -3985,8 +3992,10 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -4314,7 +4323,7 @@ Array [
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -4375,7 +4384,7 @@ Array [
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -5408,6 +5417,7 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -5422,8 +5432,10 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -5751,7 +5763,7 @@ Array [
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -5812,7 +5824,7 @@ Array [
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -6593,6 +6605,7 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -6607,8 +6620,10 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -6936,7 +6951,7 @@ Array [
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -6997,7 +7012,7 @@ Array [
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);

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

@@ -778,6 +778,7 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -792,8 +793,10 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -1193,7 +1196,7 @@ Array [
   width: 18.75rem;
   height: 3rem;
   min-height: 3rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);

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

@@ -513,6 +513,7 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -527,8 +528,10 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -865,7 +868,7 @@ Array [
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1744,6 +1747,7 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -1758,8 +1762,10 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -2096,7 +2102,7 @@ Array [
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -3639,6 +3645,7 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -3653,8 +3660,10 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -3991,7 +4000,7 @@ Array [
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -4996,6 +5005,7 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -5010,8 +5020,10 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -5339,7 +5351,7 @@ Array [
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -6382,6 +6394,7 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -6396,8 +6409,10 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -6725,7 +6740,7 @@ Array [
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -7693,6 +7708,7 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   margin-right: 0.75rem;
   font-weight: 600;
   white-space: pre;
@@ -7707,8 +7723,10 @@ Array [
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-bottom: 0.1875rem;
   float: right;
   font-size: 0.8125rem;
+  margin-top: 0.375rem;
   float: none;
   width: 18.75rem;
 }
@@ -8045,7 +8063,7 @@ Array [
   width: 18.75rem;
   height: 6rem;
   min-height: 6rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);