making metric list item responsive

ui/src/components/list/meta.js

@@ -9,7 +9,7 @@ const {
   default: styled
 } = Styled;
 
-const xs = (props) => props.collapsed
+const md = (props) => props.collapsed
   ? 12
   : 6;
 
@@ -27,10 +27,12 @@ module.exports = transferProps([
   'headed',
   'fromHeader'
 ], (props) => {
+
   const meta = (
     <Column
+      md={md(props)}
       name='list-item-meta'
-      xs={xs(props)}
+      xs={12}
       {...props}
     >
       <InnerRow collapsed={props.collapsed}>

ui/src/components/list/outlet.js

@@ -16,8 +16,9 @@ const StyledColumn = styled(Column)`
 
 const Outlet = (props) => (
   <StyledColumn
+    md={6}
     name='list-item-outlet'
-    xs={6}
+    xs={12}
     {...props}
   >
     {props.children}

ui/src/components/list/story.js

@@ -189,13 +189,14 @@ storiesOf('List Item', module)
     <Base>
       <ListItem headed>
         <ListItemHeader>
-          <ListItemMeta>
+          <ListItemMeta md={6} xs={12} >
             <ListItemTitle>Percona</ListItemTitle>
             <ListItemSubTitle>5 instances</ListItemSubTitle>
             <ListItemDescription>Flags</ListItemDescription>
           </ListItemMeta>
           <ListItemOptions>…</ListItemOptions>
         </ListItemHeader>
+
         <ListItemGroupView>
           <ListItem flat>
             <ListItemView>
@@ -204,7 +205,7 @@ storiesOf('List Item', module)
               </ListItemMeta>
               <ListItemOutlet>
                 <Row>
-                  <Column xs={4}>
+                  <Column md={4} xs={12}>
                     <MiniMetricView borderless>
                       <MiniMetricMeta>
                         <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
@@ -213,7 +214,7 @@ storiesOf('List Item', module)
                       <MiniMetricGraph data={MiniMetricData} />
                     </MiniMetricView>
                   </Column>
-                  <Column xs={4}>
+                  <Column md={4} xs={12}>
                     <MiniMetricView borderless>
                       <MiniMetricMeta>
                         <MiniMetricTitle>Memory: 54%</MiniMetricTitle>
@@ -222,7 +223,7 @@ storiesOf('List Item', module)
                       <MiniMetricGraph data={MiniMetricData} />
                     </MiniMetricView>
                   </Column>
-                  <Column xs={4}>
+                  <Column md={4} xs={12}>
                     <MiniMetricView borderless>
                       <MiniMetricMeta>
                         <MiniMetricTitle>Memory: 54%</MiniMetricTitle>