fix: less whitespace in message & add app name

Author: jmattheis

ui/src/message/Message.tsx

@@ -150,48 +150,59 @@ const Message = ({
                     borderLeftWidth: 6,
                     borderLeftStyle: 'solid',
                 }}>
-                <div style={{display: 'flex', width: '100%'}}>
+                <div
+                    style={{
+                        display: 'flex',
+                        width: '100%',
+                        alignItems: 'start',
+                        alignContent: 'center',
+                        paddingBottom: 5,
+                    }}>
                     <div className={classes.imageWrapper}>
                         {image !== null ? (
                             <img
                                 src={config.get('url') + image}
                                 alt={`${appName} logo`}
-                                width="70"
-                                height="70"
+                                width="50"
+                                height="50"
                                 className={classes.image}
                             />
                         ) : null}
                     </div>
-                    <div className={classes.messageContentWrapper}>
-                        <div className={classes.header}>
-                            <Typography className={`${classes.headerTitle} title`} variant="h5">
-                                {title}
-                            </Typography>
-                            <Typography variant="body1" className={classes.date}>
-                                <TimeAgo
-                                    date={date}
-                                    formatter={makeIntlFormatter({
-                                        style: dateWrapped ? 'long' : 'narrow',
-                                    })}
-                                />
-                            </Typography>
-                            <IconButton
-                                onClick={fDelete}
-                                className={`${classes.trash} delete`}
-                                size="large">
-                                <Delete />
-                            </IconButton>
-                        </div>
-
-                        <Typography
-                            component="div"
-                            ref={setPreviewRef}
-                            className={`${classes.content} content ${
-                                isOverflowing && expanded ? 'expanded' : ''
-                            }`}>
-                            {renderContent()}
+                    <div className={`${classes.headerTitle} title`}>
+                        <Typography className={`${classes.headerTitle} title`} variant="h5">
+                            {title}
+                        </Typography>
+                        <Typography variant="subtitle1" fontSize={12} style={{opacity: 0.7}}>
+                            {appName}
                         </Typography>
                     </div>
+                    <Typography variant="body1" className={classes.date}>
+                        <TimeAgo
+                            date={date}
+                            formatter={makeIntlFormatter({
+                                style: dateWrapped ? 'long' : 'narrow',
+                            })}
+                        />
+                    </Typography>
+                    <IconButton
+                        onClick={fDelete}
+                        style={{padding: 14}}
+                        className={`${classes.trash} delete`}
+                        size="large">
+                        <Delete />
+                    </IconButton>
+                </div>
+
+                <div className={classes.messageContentWrapper}>
+                    <Typography
+                        component="div"
+                        ref={setPreviewRef}
+                        className={`${classes.content} content ${
+                            isOverflowing && expanded ? 'expanded' : ''
+                        }`}>
+                        {renderContent()}
+                    </Typography>
                 </div>
                 {isOverflowing && (
                     <Button