Fix scrolling issue in firefox (Close algorithm-visualizer#248) (algo…

…rithm-visualizer#251)
ETH-PEACH-Lab · Jun 7, 2019 · 83e4c19 · 83e4c19
1 parent e47d303
commit 83e4c19
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 14 deletions.
diff --git 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;
   }
-}
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -7,6 +7,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  min-height: 0;
 
   &:first-child {
     border-top: none;