From 42219ab655090ea1194e1b8e280ed8e86b31abbe Mon Sep 17 00:00:00 2001
From: ludovicm67 <ludovicmuller1@gmail.com>
Date: Thu, 23 Jan 2020 21:36:49 +0100
Subject: [PATCH 1/4] webui: custom image tag

---
 webui/src/Content.js      |  7 ++++++-
 webui/src/tag/ImageTag.js | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 webui/src/tag/ImageTag.js

diff --git a/webui/src/Content.js b/webui/src/Content.js
index 19f576317b47128b574f09febd86c77dfc50bece..737c5ab21e2d14d22262c2f02f86d6a30a9c97b9 100644
--- a/webui/src/Content.js
+++ b/webui/src/Content.js
@@ -2,12 +2,17 @@ import unified from 'unified';
 import parse from 'remark-parse';
 import html from 'remark-html';
 import remark2react from 'remark-react';
+import ImageTag from './tag/ImageTag';
 
 const Content = ({ markdown }) => {
   const processor = unified()
     .use(parse)
     .use(html)
-    .use(remark2react);
+    .use(remark2react, {
+      remarkReactComponents: {
+        img: ImageTag,
+      },
+    });
 
   return processor.processSync(markdown).contents;
 };
diff --git a/webui/src/tag/ImageTag.js b/webui/src/tag/ImageTag.js
new file mode 100644
index 0000000000000000000000000000000000000000..aea65e9deffbc1bb8b0339ec222d9bfbaa989e59
--- /dev/null
+++ b/webui/src/tag/ImageTag.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  tag: {
+    maxWidth: '100%',
+  },
+});
+
+const ImageTag = (props) => {
+  const classes = useStyles();
+  return <img className={classes.tag} {...props} />
+};
+
+export default ImageTag;
\ No newline at end of file

From e08ecf1a7f8d93b584c0c5130e4333d6621a4c52 Mon Sep 17 00:00:00 2001
From: ludovicm67 <ludovicmuller1@gmail.com>
Date: Thu, 23 Jan 2020 21:40:53 +0100
Subject: [PATCH 2/4] webui: fix column width on bug

---
 webui/src/bug/Bug.js | 1 +
 1 file changed, 1 insertion(+)

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

From 3413ee448a79686381624a414b18debd09120b9e Mon Sep 17 00:00:00 2001
From: ludovicm67 <ludovicmuller1@gmail.com>
Date: Thu, 23 Jan 2020 21:50:20 +0100
Subject: [PATCH 3/4] webui: open image in a new tab on click

---
 webui/src/tag/ImageTag.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/webui/src/tag/ImageTag.js b/webui/src/tag/ImageTag.js
index aea65e9deffbc1bb8b0339ec222d9bfbaa989e59..b0f0c1c847ed771132f4696314d57e48f1dfa256 100644
--- a/webui/src/tag/ImageTag.js
+++ b/webui/src/tag/ImageTag.js
@@ -7,9 +7,13 @@ const useStyles = makeStyles({
   },
 });
 
-const ImageTag = (props) => {
+const ImageTag = ({ alt, ...props }) => {
   const classes = useStyles();
-  return <img className={classes.tag} {...props} />
+  return (
+    <a href={props.src} target="_blank" rel="noopener noreferrer nofollow">
+      <img className={classes.tag} alt={alt} {...props} />
+    </a>
+  );
 };
 
-export default ImageTag;
\ No newline at end of file
+export default ImageTag;

From e364674850d527fe3a3c9bb8e3745ee619784636 Mon Sep 17 00:00:00 2001
From: ludovicm67 <ludovicmuller1@gmail.com>
Date: Thu, 23 Jan 2020 22:03:22 +0100
Subject: [PATCH 4/4] webui: fix width for pre tags in bug messages

---
 webui/src/Content.js     |  2 ++
 webui/src/bug/Message.js |  1 +
 webui/src/tag/PreTag.js  | 16 ++++++++++++++++
 3 files changed, 19 insertions(+)
 create mode 100644 webui/src/tag/PreTag.js

diff --git a/webui/src/Content.js b/webui/src/Content.js
index 737c5ab21e2d14d22262c2f02f86d6a30a9c97b9..3a6900bcb465772a154a5009bc28ca21511bdccd 100644
--- a/webui/src/Content.js
+++ b/webui/src/Content.js
@@ -3,6 +3,7 @@ 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()
@@ -11,6 +12,7 @@ const Content = ({ markdown }) => {
     .use(remark2react, {
       remarkReactComponents: {
         img: ImageTag,
+        pre: PreTag,
       },
     });
 
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/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 <pre className={classes.tag} {...props}></pre>;
+};
+
+export default PreTag;