diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less
index 30c2e9197..4cf5f03d8 100644
--- a/customize.dist/src/less2/include/forms.less
+++ b/customize.dist/src/less2/include/forms.less
@@ -7,6 +7,12 @@
 }
 
 & {
+    input[type="number"] {
+        &[disabled] {
+            color: @cp_forms-disabled !important;
+        }
+    }
+
     @alertify_padding-base: @variables_padding;
 
     input:not(.numInput):not(.form-control):not([type="checkbox"]), textarea, div.cp-textarea {
diff --git a/www/common/sframe-common-codemirror.js b/www/common/sframe-common-codemirror.js
index ec9fe892c..3ef7e2b38 100644
--- a/www/common/sframe-common-codemirror.js
+++ b/www/common/sframe-common-codemirror.js
@@ -159,34 +159,24 @@ define([
     /**
      * Wraps a text based on column set by user in setting.
      * For example, if the number of characters exceed the value set by user,
-     * then it will wrap the text such that its within the character set by user 
+     * then it will wrap the text such that its within the character set by user
      */
     module.wrapParagraph = function (editor, CodeMirror, metadataMgr) {
-        var wait, options = { column: 60 }, changing = false;
         var data = metadataMgr.getPrivateData().settings;
+        if (!data.codemirror) { return; }
+        var options = { column: 60 };
+        var column = data.codemirror.hardWrapMaxWidth;
+        var hardWrapEnabled = data.codemirror.hardWrapMaxWidthEnabled;
+        // FIXME a reload of codemirror documents is required
+        // in order for changes in settings to be applied
+        if (!hardWrapEnabled) { return; }
+        options.column = typeof(column) === 'number' && !isNaN(column) ? column : 60;
 
-        /**
-         * Need to ensure that the codemirror is not a null object 
-         */
-        if (data.codemirror) {
-            var column = data.codemirror.hardWrapMaxWidth;
-            var hardWrapEnabled = data.codemirror.hardWrapMaxWidthEnabled;
-            options.column = typeof(column) === 'number' && !isNaN(column) ? column : 60; 
+        var wrap = Util.throttle(function (cm, change) {
+            cm.wrapParagraphsInRange(change.from, CodeMirror.CodeMirror.changeEnd(change), options);
+        }, 200);
 
-            if (hardWrapEnabled) {
-                editor.on('change', (cm, change) => {
-                    if (changing) { return; }
-        
-                    clearTimeout(wait);
-        
-                    wait = setTimeout(function () {
-                        changing = true;
-                        cm.wrapParagraphsInRange(change.from, CodeMirror.CodeMirror.changeEnd(change), options);
-                        changing = false;
-                    }, 200);
-                });
-            }
-        }
+        editor.on('change', wrap);
     };
 
     module.mkIndentSettings = function (editor, metadataMgr) {
@@ -647,4 +637,4 @@ define([
     };
 
     return module;
-});
\ No newline at end of file
+});
diff --git a/www/common/translations/messages.json b/www/common/translations/messages.json
index f5c0d3e32..11b05dc6f 100644
--- a/www/common/translations/messages.json
+++ b/www/common/translations/messages.json
@@ -423,8 +423,6 @@
     "settings_codeIndentation": "Code editor indentation (spaces)",
     "settings_codeUseTabs": "Indent using tabs (instead of spaces)",
     "settings_codeFontSize": "Font size in the code editor",
-    "settings_codeMaxWidth": "Max width before code wraps to next line",
-    "settings_codeMaxWidthDescription": "If checked, this feature is enabled. You can change the width at which the line will wrap. If not checked, this feature is disabled, so the input will be disabled as well.",
     "settings_padWidth": "Editor's maximum width",
     "settings_padWidthHint": "Switch between page mode (default) that limits the width of the text editor, and using the full width of the screen.",
     "settings_padWidthLabel": "Reduce the editor's width",
diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less
index 3d4577e99..51c3ee04d 100644
--- a/www/settings/app-settings.less
+++ b/www/settings/app-settings.less
@@ -21,6 +21,11 @@
     div.alert {
         font-size: @colortheme_app-font-size;
         padding: 10px;
+        &.alert-warning {
+            padding: 5px;
+            margin-top: 15px;
+            font-size: 12px;
+        }
     }
 
     .export_main();
diff --git a/www/settings/inner.js b/www/settings/inner.js
index 8d09d909b..36a719ca5 100644
--- a/www/settings/inner.js
+++ b/www/settings/inner.js
@@ -1570,25 +1570,38 @@ define([
         return $div;
     };
 
+
+    Messages.settings_codeMaxWidth = "Max width before code wraps to next line"; // XXX
+    Messages.settings_codeMaxWidthDescription = "If checked, this feature is enabled. You can change the width at which the line will wrap. If not checked, this feature is disabled, so the input will be disabled as well."; // XXX
+    Messages.ui_experimental = "This feature is considered experimental."; // XXX
+
     create['code-max-width'] = function () {
         var key = 'hardWrapMaxWidth';
         var hardWrapMaxWidthEnabledKey = `${key}Enabled`;
         var defaultInitialMaxWidth = 60;
 
-        var $div = $('<div>', {
-            'class': 'cp-settings-code-max-width cp-sidebarlayout-element'
-        });
+        var cbox = UI.createCheckbox('cp-settings-code-max-width');
+        var container = h('span.cp-sidebarlayout-input-block', [
+            cbox,
+        ]);
 
-        $('<label>').text(Messages.settings_codeMaxWidth).appendTo($div);
-        $('<span>', {'class': 'cp-sidebarlayout-description'})
-            .text(Messages.settings_codeMaxWidthDescription).appendTo($div);
+        var experimental = h('div.alert.alert-warning', [
+            '⚠️ ',
+            Messages.ui_experimental,
+        ]);
 
-        var $container = $('<span>', {
-            'class': 'cp-sidebarlayout-input-block'
-        }).appendTo($div);
+        var div = h('div.cp-settings-code-max-width.cp-sidebarlayout-element', [
+            h('span.cp-sidebarlayout-description', [
+                h('label', [Messages.settings_codeMaxWidth]),
+                experimental,
+                Messages.settings_codeMaxWidthDescription
+            ]),
+            container,
+        ]);
 
-        var $cbox = $(UI.createCheckbox('cp-settings-code-max-width'));
-        $cbox.appendTo($container);
+        var $div= $(div);
+        var $container = $(container);
+        var $cbox = $(cbox);
 
         var $input = $('<input>', {
             'min': defaultInitialMaxWidth,
@@ -1596,6 +1609,11 @@ define([
         })
         .on('change', function () {
             var val = parseInt($input.val());
+            if (val < defaultInitialMaxWidth) {
+                $input.val(defaultInitialMaxWidth);
+                return console.log(`max-width cannot be less than ${defaultInitialMaxWidth}`);
+            }
+
             if (!isNaN(val) && typeof (val) !== 'number') { return; }
             common.setAttribute(['codemirror', key], val);
         }).appendTo($container);
@@ -1603,7 +1621,7 @@ define([
         $cbox.find('input').change(
             function () {
                 // If enable hard wrap max width is enabled, then disabled=false
-                // otherwise, disabled=true 
+                // otherwise, disabled=true
                 $input.attr('disabled', !this.checked);
                 common.setAttribute(['codemirror', hardWrapMaxWidthEnabledKey], this.checked);
             }