From 83e4c196a7dc64418b799148b0b8bfe99ce86337 Mon Sep 17 00:00:00 2001
From: Jinseo Park <parkjs814@gmail.com>
Date: Fri, 7 Jun 2019 13:50:57 +0900
Subject: [PATCH] Fix scrolling issue in firefox (Close #248) (#251)

---
 .../components/Navigator/stylesheet.scss         |  3 ++-
 .../VisualizationViewer/stylesheet.scss          |  1 +
 .../core/renderers/LogRenderer/index.jsx         |  4 +++-
 .../core/renderers/LogRenderer/stylesheet.scss   | 12 ++++++++----
 .../core/renderers/MarkdownRenderer/index.jsx    |  6 ++++--
 .../renderers/MarkdownRenderer/stylesheet.scss   | 16 ++++++++++------
 .../core/renderers/Renderer/stylesheet.scss      |  1 +
 7 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/frontend/components/Navigator/stylesheet.scss b/src/frontend/components/Navigator/stylesheet.scss
index 431344f8..96623886 100644
--- a/src/frontend/components/Navigator/stylesheet.scss
+++ b/src/frontend/components/Navigator/stylesheet.scss
@@ -4,6 +4,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
+  min-height: 0;
 
   .search_bar_container {
     height: $line-height;
@@ -37,4 +38,4 @@
     border-top: 1px solid $theme-light;
     overflow-y: auto;
   }
-}
\ No newline at end of file
+}
diff --git a/src/frontend/components/VisualizationViewer/stylesheet.scss b/src/frontend/components/VisualizationViewer/stylesheet.scss
index 8db0a8ed..cdd65d6e 100644
--- a/src/frontend/components/VisualizationViewer/stylesheet.scss
+++ b/src/frontend/components/VisualizationViewer/stylesheet.scss
@@ -5,4 +5,5 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  min-height: 0;
 }
diff --git a/src/frontend/core/renderers/LogRenderer/index.jsx b/src/frontend/core/renderers/LogRenderer/index.jsx
index eb4bad6e..5ce63771 100644
--- a/src/frontend/core/renderers/LogRenderer/index.jsx
+++ b/src/frontend/core/renderers/LogRenderer/index.jsx
@@ -19,7 +19,9 @@ class LogRenderer extends Renderer {
     const { log } = this.props.data;
 
     return (
-      <div className={styles.log} ref={this.elementRef} dangerouslySetInnerHTML={{ __html: log }} />
+      <div className={styles.log} ref={this.elementRef}>
+        <div className={styles.content} dangerouslySetInnerHTML={{ __html: log }} />
+      </div>
     );
   }
 }
diff --git a/src/frontend/core/renderers/LogRenderer/stylesheet.scss b/src/frontend/core/renderers/LogRenderer/stylesheet.scss
index 6a5097d7..518eabb4 100644
--- a/src/frontend/core/renderers/LogRenderer/stylesheet.scss
+++ b/src/frontend/core/renderers/LogRenderer/stylesheet.scss
@@ -3,11 +3,15 @@
 .log {
   flex: 1;
   align-self: stretch;
-  padding: 24px;
   display: flex;
   flex-direction: column;
+  align-items: stretch;
   overflow-y: auto;
-  font-family: $font-family-monospace;
-  white-space: pre-wrap;
-  line-height: 1.6;
+
+  .content {
+    padding: 24px;
+    font-family: $font-family-monospace;
+    white-space: pre-wrap;
+    line-height: 1.6;
+  }
 }
diff --git a/src/frontend/core/renderers/MarkdownRenderer/index.jsx b/src/frontend/core/renderers/MarkdownRenderer/index.jsx
index 03c49d4f..b1385766 100644
--- a/src/frontend/core/renderers/MarkdownRenderer/index.jsx
+++ b/src/frontend/core/renderers/MarkdownRenderer/index.jsx
@@ -62,8 +62,10 @@ class MarkdownRenderer extends Renderer {
     };
 
     return (
-      <ReactMarkdown className={styles.markdown} source={markdown} renderers={{ heading, link, image }}
-                     escapeHtml={false} />
+      <div className={styles.markdown}>
+        <ReactMarkdown className={styles.content} source={markdown} renderers={{ heading, link, image }}
+                       escapeHtml={false} />
+      </div>
     );
   }
 }
diff --git a/src/frontend/core/renderers/MarkdownRenderer/stylesheet.scss b/src/frontend/core/renderers/MarkdownRenderer/stylesheet.scss
index 581639d0..2414473f 100644
--- a/src/frontend/core/renderers/MarkdownRenderer/stylesheet.scss
+++ b/src/frontend/core/renderers/MarkdownRenderer/stylesheet.scss
@@ -1,15 +1,19 @@
 @import "~/common/stylesheet/index";
 
 .markdown {
-  display: flex;
-  flex-direction: column;
   flex: 1;
   align-self: stretch;
-  padding: 24px;
-  font-size: $font-size-large;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
   overflow-y: auto;
 
-  a {
-    text-decoration: underline;
+  .content {
+    padding: 24px;
+    font-size: $font-size-large;
+
+    a {
+      text-decoration: underline;
+    }
   }
 }
diff --git a/src/frontend/core/renderers/Renderer/stylesheet.scss b/src/frontend/core/renderers/Renderer/stylesheet.scss
index 419e2c91..7a1ae0fb 100644
--- a/src/frontend/core/renderers/Renderer/stylesheet.scss
+++ b/src/frontend/core/renderers/Renderer/stylesheet.scss
@@ -7,6 +7,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  min-height: 0;
 
   &:first-child {
     border-top: none;