#18 mobile style

app/components/activity/ActivityDetails.jsx

@@ -12,13 +12,30 @@ import { QUERY_ACTIVITY_INFO } from './operations'
 
 const DetailsTable = styled(Table)`
   width: 100%;
+  @media screen and (max-width: 600px) {
+    th {
+      display: none;
+    }
+    tr {
+      border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+    }
+  }
 `
 const TD = styled.td`
   font-size: ${th('fontSizeBaseSmall')};
+  @media screen and (max-width: 600px) {
+    display: inline-block;
+    width: 100%;
+    border: 0 !important;
+  }
 `
 const TdDate = styled(TD)`
   vertical-align: top;
   white-space: nowrap;
+  @media screen and (max-width: 600px) {
+    width: 50%;
+    white-space: normal;
+  }
 `
 const TdPerson = TdDate
 

app/components/activity/QuickView.jsx

@@ -10,15 +10,13 @@ const Heading = styled(H2)`
   border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
   padding-bottom: ${th('gridUnit')};
 `
-
 const Checklist = styled.div`
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   border-right: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
   @media screen and (max-width: 970px) {
-    display: block;
-    border-right: 0;
+    flex-wrap: wrap;
   }
 `
 const Col = styled.div`
@@ -42,23 +40,9 @@ const Col = styled.div`
   }
 
   @media screen and (max-width: 970px) {
-    flex-direction: row;
-    align-items: stretch;
-    border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
-    border-top: 0;
-    &:first-child {
-      border-top: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
-    }
-    & > div {
-      flex: 1 1 50%;
-      border-top: 0;
-      &:first-child {
-        padding: calc(${th('gridUnit')} * 1.5) 0;
-        flex: 1 1 50%;
-        border-bottom: 0;
-        border-right: ${th('borderWidth')} ${th('borderStyle')}
-          ${th('colorBorder')};
-      }
+    div {
+      font-size: ${th('fontSizeBaseSmall')};
+      white-space: nowrap;
     }
   }
 `