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

64json · web-flow · commit 83e4c196a7dc · 2019-06-07T13:50:57.000+09:00
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;

Original file line number	Diff line number	Diff line change
`@@ -5,4 +5,5 @@`
`5`	`5`	`display: flex;`
`6`	`6`	`flex-direction: column;`
`7`	`7`	`align-items: stretch;`
	`8`	`+ min-height: 0;`
`8`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,9 @@ class LogRenderer extends Renderer {`
`19`	`19`	`const { log } = this.props.data;`
`20`	`20`
`21`	`21`	`return (`
`22`		`- <div className={styles.log} ref={this.elementRef} dangerouslySetInnerHTML={{ __html: log }} />`
	`22`	`+ <div className={styles.log} ref={this.elementRef}>`
	`23`	`+ <div className={styles.content} dangerouslySetInnerHTML={{ __html: log }} />`
	`24`	`+ </div>`
`23`	`25`	`);`
`24`	`26`	`}`
`25`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -62,8 +62,10 @@ class MarkdownRenderer extends Renderer {`
`62`	`62`	`};`
`63`	`63`
`64`	`64`	`return (`
`65`		`- <ReactMarkdown className={styles.markdown} source={markdown} renderers={{ heading, link, image }}`
`66`		`- escapeHtml={false} />`
	`65`	`+ <div className={styles.markdown}>`
	`66`	`+ <ReactMarkdown className={styles.content} source={markdown} renderers={{ heading, link, image }}`
	`67`	`+ escapeHtml={false} />`
	`68`	`+ </div>`
`67`	`69`	`);`
`68`	`70`	`}`
`69`	`71`	`}`