Merge pull request #299 from ludovicm67/fix-webui

Michael Muré created 6 years ago

Fix column overflow in webui

Change summary

webui/src/Content.js      |  9 ++++++++-
webui/src/bug/Bug.js      |  1 +
webui/src/bug/Message.js  |  1 +
webui/src/tag/ImageTag.js | 19 +++++++++++++++++++
webui/src/tag/PreTag.js   | 16 ++++++++++++++++
5 files changed, 45 insertions(+), 1 deletion(-)

Detailed changes

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;
 };

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),

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,

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;

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;