feat(xo-web): make CloudConfig inputs monospaced

Fixed #5786

packages/xo-web/src/index.scss

@@ -13,6 +13,11 @@ $brand-info: #044b7f;
 
 @import "../../../node_modules/bootstrap/scss/bootstrap";
 
+// imported from https://github.com/twbs/bootstrap/blob/d64466a2488bbaac9a1005db3a199a8bc6846e3e/scss/_variables.scss#L420
+.text-monospace {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 // -------------------------------------------------------------------
 
 $fa-font-path: "./";

packages/xo-web/src/xo-app/new-vm/index.js

@@ -1142,7 +1142,7 @@ export default class NewVm extends BaseComponent {
                   {_('newVmUserConfigLabel')}
                   <br />
                   <DebounceTextarea
-                    className='form-control'
+                    className='form-control text-monospace'
                     disabled={installMethod !== 'customConfig'}
                     onChange={this._linkState('customConfig')}
                     rows={7}
@@ -1156,7 +1156,7 @@ export default class NewVm extends BaseComponent {
                     {_('newVmNetworkConfigLabel')} <NetworkConfigInfo />
                     <br />
                     <DebounceTextarea
-                      className='form-control'
+                      className='form-control text-monospace'
                       disabled={installMethod !== 'customConfig'}
                       onChange={this._linkState('networkConfig')}
                       rows={7}
@@ -1246,7 +1246,7 @@ export default class NewVm extends BaseComponent {
             <label>{_('newVmCloudConfig')}</label>{' '}
             {!coreOsDefaultTemplateError ? (
               <DebounceTextarea
-                className='form-control'
+                className='form-control text-monospace'
                 onChange={this._linkState('cloudConfig')}
                 rows={7}
                 value={cloudConfig}

packages/xo-web/src/xo-app/settings/cloud-configs/index.js

@@ -119,7 +119,7 @@ export default decorate([
             </label>{' '}
             <AvailableTemplateVars />
             <DebounceTextarea
-              className='form-control'
+              className='form-control text-monospace'
               id={state.inputTemplateId}
               name='template'
               onChange={effects.setInputValue}