adjust layout

src/client/js/components/Admin/Customize/CustomizeCssSetting.jsx

@@ -44,19 +44,16 @@ class CustomizeCssSetting extends React.Component {
             { t('admin:customize_setting.reflect_change') }
           </CardBody>
         </Card>
-        <div className="form-group">
-          <div className="col-12">
-            <CustomCssEditor
-              value={adminCustomizeContainer.state.currentCustomizeCss || ''}
-              onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeCss(inputValue) }}
-            />
-          </div>
-          <div className="col-12">
-            <p className="form-text text-muted text-right">
-              <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
-              {t('admin:customize_setting.ctrl_space')}
-            </p>
-          </div>
+
+        <div className="form-group w-100">
+          <CustomCssEditor
+            value={adminCustomizeContainer.state.currentCustomizeCss || ''}
+            onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeCss(inputValue) }}
+          />
+          <p className="form-text text-muted text-right">
+            <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
+            {t('admin:customize_setting.ctrl_space')}
+          </p>
         </div>
 
         <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />

src/client/js/components/Admin/Customize/CustomizeHeaderSetting.jsx

@@ -56,13 +56,11 @@ class CustomizeHeaderSetting extends React.Component {
           </pre>
         </div>
 
-        <div className="col-12">
+        <div className="form-group w-100">
           <CustomHeaderEditor
             value={adminCustomizeContainer.state.currentCustomizeHeader || ''}
             onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeHeader(inputValue) }}
           />
-        </div>
-        <div className="col-12">
           <p className="form-text text-muted text-right">
             <i className="fa fa-fw fa-keyboard-o" aria-hidden="true"></i>
             {t('admin:customize_setting.ctrl_space')}

src/client/js/components/Admin/Customize/CustomizeScriptSetting.jsx

@@ -87,19 +87,15 @@ class CustomizeScriptSetting extends React.Component {
           <pre className="hljs"><code>{this.getExampleCode()}</code></pre>
         </div>
 
-        <div className="form-group">
-          <div className="col-12">
-            <CustomScriptEditor
-              value={adminCustomizeContainer.state.currentCustomizeScript || ''}
-              onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeScript(inputValue) }}
-            />
-          </div>
-          <div className="col-12">
-            <p className="form-text text-muted text-right">
-              <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
-              {t('admin:customize_setting.ctrl_space')}
-            </p>
-          </div>
+        <div className="form-group w-100">
+          <CustomScriptEditor
+            value={adminCustomizeContainer.state.currentCustomizeScript || ''}
+            onChange={(inputValue) => { adminCustomizeContainer.changeCustomizeScript(inputValue) }}
+          />
+          <p className="form-text text-muted text-right">
+            <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
+            {t('admin:customize_setting.ctrl_space')}
+          </p>
         </div>
 
         <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />