fix: prevent image card from growing to much

consoles/my-joy-images/src/components/image.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { Field } from 'redux-form';
-import Flex from 'styled-flex-component';
+import Flex, { FlexItem } from 'styled-flex-component';
 import { Padding, Margin } from 'styled-components-spacing';
 import remcalc from 'remcalc';
 
@@ -56,7 +56,6 @@ const Content = styled(Padding)`
 
 const Max = styled(Flex)`
   max-width: 100%;
-  height: 100%;
 `;
 
 const Actions = styled(Flex)`
@@ -75,6 +74,7 @@ const PopoverDivider = styled(BasePopoverDivider)`
   width: 100%;
 `;
 
+
 export const Image = ({
   name,
   id,
@@ -97,15 +97,19 @@ export const Image = ({
             <CardHeader white radius>
               <Padding left={2} right={2}>
                 <Flex full alignCenter>
-                  <Margin right={2}>
+                  <FlexItem>
-                    {React.createElement(OS[os], {
+                    <Margin right={2}>
-                      width: '24',
+                      {React.createElement(OS[os], {
-                      height: '24'
+                        width: '24',
-                    })}
+                        height: '24'
-                  </Margin>
+                      })}
-                  <A to={`/images/${id}/summary`} component={Link}>
+                    </Margin>
-                    {name}
+                  </FlexItem>
-                  </A>
+                  <FlexItem>
+                    <A to={`/images/${id}/summary`} component={Link}>
+                      {name}
+                    </A>
+                  </FlexItem>
                 </Flex>
               </Padding>
             </CardHeader>

consoles/my-joy-images/src/containers/list.js

@@ -42,9 +42,6 @@ export const List = ({
   handleRemove
 }) => (
   <ViewContainer main>
-    <Margin top={5}>
-      <H3>Images</H3>
-    </Margin>
     <Margin top={4}>
       <ReduxForm form={LIST_TOOLBAR_FORM}>
         {props => <ToolbarForm {...props} actionable={!loading} />}

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

@@ -576,7 +576,6 @@ exports[`renders <AddForm /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -1639,7 +1638,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap

@@ -1133,7 +1133,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -3657,7 +3656,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap

@@ -1201,7 +1201,6 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -1214,7 +1213,6 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap

@@ -1195,7 +1195,6 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -2931,7 +2930,6 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -4342,7 +4340,6 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;

packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap

@@ -238,7 +238,6 @@ exports[`renders <Network /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -1119,7 +1118,6 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -2013,7 +2011,6 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -2944,7 +2941,6 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -2957,7 +2953,6 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -4092,7 +4087,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -5359,7 +5353,6 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;

packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap

@@ -59,7 +59,6 @@ exports[`Card Card With Header 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;

packages/ui-toolkit/src/card/header.js

@@ -12,7 +12,6 @@ const BaseHeader = styled(BaseCard)`
   flex-direction: row;
   z-index: 1;
   line-height: ${remcalc(24)};
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;

packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap

@@ -310,7 +310,6 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -1114,7 +1113,6 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -1522,7 +1520,6 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -2473,7 +2470,6 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -3589,7 +3585,6 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -4587,7 +4582,6 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -5599,7 +5593,6 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -6679,7 +6672,6 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;
@@ -7816,7 +7808,6 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   flex-direction: row;
   z-index: 1;
   line-height: 1.5rem;
-  height: auto;
   max-width: 100%;
   border-top: 0px;
   border-left: 0px;