Removed collapsing, added scrolling.

src/core/components/highlight-code.jsx

@@ -11,7 +11,6 @@ export default class HighlightCode extends Component {
 
   componentDidMount() {
     highlight(this.el)
-    this.setState({ contentsHidden: this.props.value.length > 600 })
   }
 
   componentDidUpdate() {
@@ -22,10 +21,6 @@ export default class HighlightCode extends Component {
     this.el = c
   }
 
-  onToggleSeeFullContents = () => {
-    this.setState({ contentsHidden: !this.state.contentsHidden })
-  }
-
   downloadJSON = () => {
     let content = this.props.value
     let fileName = "response"
@@ -35,24 +30,16 @@ export default class HighlightCode extends Component {
 
   render () {
     let { value, className } = this.props
-    let contentsHidden = this.state && this.state.contentsHidden
     className = className || ""
 
     return (
-      <div>
+      <div className="highlight-code">
         <div className="download-contents" onClick={this.downloadJSON}>
           {"Download"}
         </div>
-        <pre
-          ref={this.initializeComponent}
-          className={className + " microlight" + (contentsHidden ? " flat-bottom" : "")}>
-          { contentsHidden ? value.substring(0, 600) : value }
+        <pre ref={this.initializeComponent} className={className + " microlight"}>
+          { value }
         </pre>
-        { value.length > 600 &&
-          <div className="see-full-contents" onClick={this.onToggleSeeFullContents}>
-            { contentsHidden ? "See full contents" : "Collapse contents"}
-          </div>
-        }
       </div>
     )
   }

src/style/_layout.scss

@@ -624,51 +624,34 @@
     {
         display: block;
     }
-
-    &.flat-bottom {
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px;
-    }
 }
 
-.see-full-contents {
+.highlight-code {
+  position: relative;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: #7d8293;
-  padding: 5px 10px 5px;
-  border: 10px solid #41444e;
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
-  font-family: 'Titillium Web', sans-serif;
-  font-weight: 600;
-  color: white;
-  font-size: 14px;
-  bottom: 0px;
-  position: sticky;
-}
+  flex-direction: column;
+  align-items: flex-end;
 
-.see-full-contents::after {
-  width: 100%;
-  height: 20px;
+  >.microlight {
+    overflow-y: auto;
+    max-height: 400px;
+  }
 }
 
 .download-contents {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
   cursor: pointer;
   background: #7d8293;
-  padding: 5px 5px 5px;
-  border: 10px solid #41444e;
-  border-top-right-radius: 6px;
-  border-top-left-radius: 6px;
+  padding: 5px;
+  border-radius: 4px;
   font-family: 'Titillium Web', sans-serif;
   font-weight: 600;
   color: white;
   font-size: 14px;
-  bottom: 0px;
+  height: 30px;
+  width: 75px;
 }
 
 .scheme-container