fix(my-joy-instances): truncate summary copy on Instance summary card

packages/my-joy-instances/src/components/instances/summary.js

@@ -40,6 +40,12 @@ const GreyLabel = styled(Label)`
   padding-right: ${remcalc(3)};
 `;
 
+const TrimedLabel = styled(Label)`
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+`
+
 const Flex = styled.div`
   align-items: center;
   display: flex;
@@ -78,17 +84,17 @@ export const Meta = ({
   </Row>,
   <Margin top={2} bottom={3}>
     <Flex>
-      <Label>
+      <TrimedLabel>
         {image && image.name ? titleCase(image.name) : 'Custom Image'}
-      </Label>
+      </TrimedLabel>
       <VerticalDivider />
-      <Label>
+      <TrimedLabel>
         {brand === 'LX'
           ? 'Infrastructure container'
           : 'Hardware virtual machine'}
-      </Label>
+      </TrimedLabel>
       <VerticalDivider />
-      <Label>{(instance.package || {}).name}</Label>
+      <TrimedLabel>{(instance.package || {}).name}</TrimedLabel>
       <VerticalDivider />
       <Flex>
         <DotIcon

packages/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap

@@ -73,8 +73,8 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 }
 
 .c2 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
 }
 
 .c8 {
@@ -264,8 +264,8 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
 }
 
 .c2 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
 }
 
 .c8 {