diff --git a/webui/src/Content.js b/webui/src/Content.js
index 19f576317b47128b574f09febd86c77dfc50bece..3a6900bcb465772a154a5009bc28ca21511bdccd 100644
--- a/webui/src/Content.js
+++ b/webui/src/Content.js
@@ -2,12 +2,19 @@ import unified from 'unified';
import parse from 'remark-parse';
import html from 'remark-html';
import remark2react from 'remark-react';
+import ImageTag from './tag/ImageTag';
+import PreTag from './tag/PreTag';
const Content = ({ markdown }) => {
const processor = unified()
.use(parse)
.use(html)
- .use(remark2react);
+ .use(remark2react, {
+ remarkReactComponents: {
+ img: ImageTag,
+ pre: PreTag,
+ },
+ });
return processor.processSync(markdown).contents;
};
diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js
index 19b8b9ce4b14744f1bd15cee7b761647a6f7c119..5a159f0f2081704050650b40a2afa39b67fa93dd 100644
--- a/webui/src/bug/Bug.js
+++ b/webui/src/bug/Bug.js
@@ -31,6 +31,7 @@ const useStyles = makeStyles(theme => ({
flex: 1,
marginTop: theme.spacing(2),
marginRight: theme.spacing(2),
+ minWidth: 0,
},
sidebar: {
marginTop: theme.spacing(2),
diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js
index db67a3f514f65ed2b35b6832dbbdb85f2e289428..06c12815022b2390b663a1a67475b72e34bf0d0a 100644
--- a/webui/src/bug/Message.js
+++ b/webui/src/bug/Message.js
@@ -20,6 +20,7 @@ const useStyles = makeStyles(theme => ({
bubble: {
flex: 1,
marginLeft: theme.spacing(1),
+ minWidth: 0,
},
header: {
...theme.typography.body1,
diff --git a/webui/src/tag/ImageTag.js b/webui/src/tag/ImageTag.js
new file mode 100644
index 0000000000000000000000000000000000000000..b0f0c1c847ed771132f4696314d57e48f1dfa256
--- /dev/null
+++ b/webui/src/tag/ImageTag.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+ tag: {
+ maxWidth: '100%',
+ },
+});
+
+const ImageTag = ({ alt, ...props }) => {
+ const classes = useStyles();
+ return (
+
+
+
+ );
+};
+
+export default ImageTag;
diff --git a/webui/src/tag/PreTag.js b/webui/src/tag/PreTag.js
new file mode 100644
index 0000000000000000000000000000000000000000..c2440df9b6324876d511f6de0cd7366f5d152dce
--- /dev/null
+++ b/webui/src/tag/PreTag.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+ tag: {
+ maxWidth: '100%',
+ overflowX: 'auto',
+ },
+});
+
+const PreTag = props => {
+ const classes = useStyles();
+ return