Make Message cards responsive

On breakpoints smaller than 'sm', the date of the message will wrap
to a new line; and the image will be 32x32 instead of 70x70

ui/src/message/Message.tsx

@@ -1,5 +1,5 @@
 import IconButton from '@material-ui/core/IconButton';
-import {StyleRules, withStyles, WithStyles} from '@material-ui/core/styles';
+import {createStyles, Theme, withStyles, WithStyles} from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Delete from '@material-ui/icons/Delete';
 import React from 'react';
@@ -10,9 +10,12 @@ import ReactMarkdown from 'react-markdown';
 import {RenderMode, contentType} from './extras';
 import {IMessageExtras} from '../types';
 
-const styles = (): StyleRules => ({
+const styles = (theme: Theme) =>
+    createStyles({
         header: {
             display: 'flex',
+            flexWrap: 'wrap',
+            marginBottom: 0,
         },
         headerTitle: {
             flex: 1,
@@ -30,6 +33,17 @@ const styles = (): StyleRules => ({
         },
         image: {
             marginRight: 15,
+            [theme.breakpoints.down('sm')]: {
+                width: 32,
+                height: 32,
+            },
+        },
+        date: {
+            [theme.breakpoints.down('sm')]: {
+                order: 1,
+                flexBasis: '100%',
+                opacity: 0.7,
+            },
         },
         imageWrapper: {
             display: 'flex',
@@ -47,7 +61,7 @@ const styles = (): StyleRules => ({
                 overflow: 'auto',
             },
         },
-});
+    });
 
 interface IProps {
     title: string;
@@ -98,7 +112,7 @@ class Message extends React.PureComponent<IProps & WithStyles<typeof styles>> {
                             <Typography className={`${classes.headerTitle} title`} variant="h5">
                                 {title}
                             </Typography>
-                            <Typography variant="body1" className="date">
+                            <Typography variant="body1" className={classes.date}>
                                 <TimeAgo date={date} />
                             </Typography>
                             <IconButton onClick={fDelete} className={`${classes.trash} delete`}>
@@ -115,4 +129,4 @@ class Message extends React.PureComponent<IProps & WithStyles<typeof styles>> {
     }
 }
 
-export default withStyles(styles)(Message);
+export default withStyles(styles, {withTheme: true})(Message);