1 files changed, 18 insertions, 2 deletions
diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx
index f12ee8d8..babd495c 100644
--- a/webui/src/components/CommentInput/CommentInput.tsx
+++ b/webui/src/components/CommentInput/CommentInput.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
+import { Typography } from '@material-ui/core';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import TextField from '@material-ui/core/TextField';
@@ -15,14 +16,23 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(2, 0),
     padding: theme.spacing(0, 2, 2, 2),
   },
-  textarea: {},
+  textarea: {
+    '& textarea.MuiInputBase-input': {
+      resize: 'vertical',
+    },
+  },
   tabContent: {
     margin: theme.spacing(2, 0),
   },
   preview: {
+    overflow: 'auto',
     borderBottom: `solid 3px ${theme.palette.grey['200']}`,
     minHeight: '5rem',
   },
+  previewPlaceholder: {
+    color: theme.palette.text.secondary,
+    fontStyle: 'italic',
+  },
 }));
 
 type TabPanelProps = {
@@ -98,7 +108,13 @@ function CommentInput({ inputProps, inputText, loading, onChange }: Props) {
           />
         </TabPanel>
         <TabPanel value={tab} index={1} className={classes.preview}>
-          <Content markdown={input} />
+          {input !== '' ? (
+            <Content markdown={input} />
+          ) : (
+            <Typography className={classes.previewPlaceholder}>
+              Nothing to preview.
+            </Typography>
+          )}
         </TabPanel>
       </div>
     </div>