aboutsummaryrefslogtreecommitdiffstats
path: root/webui
diff options
context:
space:
mode:
authorMichael Muré <batolettre@gmail.com>2020-01-23 22:52:21 +0100
committerGitHub <noreply@github.com>2020-01-23 22:52:21 +0100
commitff33e62f65d0a4764358352492f46daccf961f93 (patch)
tree4402137d424dc90f2c09df3ef0950bb7ea41a241 /webui
parent20080aa0e485412b07e1942798b264030e744381 (diff)
parente364674850d527fe3a3c9bb8e3745ee619784636 (diff)
downloadgit-bug-ff33e62f65d0a4764358352492f46daccf961f93.tar.gz
Merge pull request #299 from ludovicm67/fix-webui
Fix column overflow in webui
Diffstat (limited to 'webui')
-rw-r--r--webui/src/Content.js9
-rw-r--r--webui/src/bug/Bug.js1
-rw-r--r--webui/src/bug/Message.js1
-rw-r--r--webui/src/tag/ImageTag.js19
-rw-r--r--webui/src/tag/PreTag.js16
5 files changed, 45 insertions, 1 deletions
diff --git a/webui/src/Content.js b/webui/src/Content.js
index 19f57631..3a6900bc 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 19b8b9ce..5a159f0f 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 db67a3f5..06c12815 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 00000000..b0f0c1c8
--- /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 (
+ <a href={props.src} target="_blank" rel="noopener noreferrer nofollow">
+ <img className={classes.tag} alt={alt} {...props} />
+ </a>
+ );
+};
+
+export default ImageTag;
diff --git a/webui/src/tag/PreTag.js b/webui/src/tag/PreTag.js
new file mode 100644
index 00000000..c2440df9
--- /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 <pre className={classes.tag} {...props}></pre>;
+};
+
+export default PreTag;