Make blockly width adjustable.

Author: ntoll

editor.html

@@ -259,6 +259,8 @@ <h2><i class="fa fa-unlock-alt"></i> <strong>{{ title }}</strong></h2>
         <script src="microbit_blocks/generators/python.js"></script>
         <script src="blockly/msg/js/en.js"></script>
 	    <script src="microbit_blocks/messages/en/messages.js"></script>
+        <script src="static/js/ResizeSensor.js"></script>
+        <script src="static/js/ElementQueries.js"></script>
         <script src="python-main.js"
             type="application/javascript"></script>
         <script>vex.defaultOptions.className = 'vex-theme-wireframe';</script>

python-main.js

@@ -532,6 +532,11 @@ function web_editor(config) {
                     var code = Blockly.Python.workspaceToCode(workspace);
                     EDITOR.setCode(code);
                 }
+                // Resize blockly
+                var element = document.getElementById('blockly');
+                new ResizeSensor(element, function() {
+                    Blockly.svgResize(workspace);
+                });
                 workspace.addChangeListener(myUpdateFunction);
             }
             // Set editor to current state of blocks.

static/css/style.css

@@ -11,6 +11,8 @@
 #blockly {
     display: none;
     min-width: 570px;
+    overflow: auto;
+    resize: horizontal;
 }
 
 /* Re-usable, generic rules */