Notebook rendering: handle metadata.scrolled

app/assets/javascripts/notebook/cells/code.vue

@@ -49,6 +49,7 @@ export default {
       v-if="hasOutput"
       :count="cell.execution_count"
       :outputs="outputs"
+      :metadata="cell.metadata"
       :code-css-class="codeCssClass"
     />
   </div>

app/assets/javascripts/notebook/cells/code/index.vue

@@ -26,6 +26,10 @@ export default {
       type: String,
       required: true,
     },
+    metadata: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   computed: {
     code() {
@@ -36,6 +40,12 @@ export default {
 
       return type.charAt(0).toUpperCase() + type.slice(1);
     },
+    cellCssClass() {
+      return {
+        [this.codeCssClass]: true,
+        'jupyter-notebook-scrolled': this.metadata.scrolled,
+      };
+    },
   },
   mounted() {
     Prism.highlightElement(this.$refs.code);
@@ -46,6 +56,6 @@ export default {
 <template>
   <div :class="type">
     <prompt :type="promptType" :count="count" />
-    <pre ref="code" :class="codeCssClass" class="language-python" v-text="code"></pre>
+    <pre ref="code" :class="cellCssClass" class="language-python" v-text="code"></pre>
   </div>
 </template>

app/assets/javascripts/notebook/cells/output/index.vue

@@ -19,6 +19,10 @@ export default {
       type: Array,
       required: true,
     },
+    metadata: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   methods: {
     outputType(output) {
@@ -78,6 +82,7 @@ export default {
       :count="count"
       :index="index"
       :raw-code="rawCode(output)"
+      :metadata="metadata"
       :code-css-class="codeCssClass"
     />
   </div>

app/assets/stylesheets/framework/files.scss

@@ -479,3 +479,8 @@ span.idiff {
     padding: $gl-padding;
   }
 }
+
+.jupyter-notebook-scrolled {
+  overflow-y: auto;
+  max-height: 20rem;
+}