diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/switch.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/switch.tsx
index c3ce535fa3c18..40991d6bdfb1d 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/switch.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/switch.tsx
@@ -19,7 +19,7 @@
 
 import React from 'react';
 
-import { EuiSwitch, EuiToolTip } from '@elastic/eui';
+import { EuiFormRow, EuiSwitch, EuiToolTip } from '@elastic/eui';
 
 interface SwitchOptionProps<ParamName extends string> {
   dataTestSubj?: string;
@@ -27,7 +27,6 @@ interface SwitchOptionProps<ParamName extends string> {
   tooltip?: string;
   disabled?: boolean;
   value?: boolean;
-  noStyle?: boolean;
   paramName: ParamName;
   setValue: (paramName: ParamName, value: boolean) => void;
 }
@@ -37,13 +36,12 @@ function SwitchOption<ParamName extends string>({
   tooltip,
   label,
   disabled,
-  noStyle = false,
   paramName,
   value = false,
   setValue,
 }: SwitchOptionProps<ParamName>) {
   return (
-    <div className={noStyle ? undefined : 'visEditorSidebar__switchOptionFormRow'}>
+    <EuiFormRow fullWidth={true}>
       <EuiToolTip content={tooltip} delay="long" position="right">
         <EuiSwitch
           label={label}
@@ -53,7 +51,7 @@ function SwitchOption<ParamName extends string>({
           onChange={ev => setValue(paramName, ev.target.checked)}
         />
       </EuiToolTip>
-    </div>
+    </EuiFormRow>
   );
 }
 
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx
index e1dad7442f0aa..22843906ffc4b 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx
@@ -127,7 +127,6 @@ function RangesPanel({
         value={stateParams.gauge.percentageMode}
         setValue={setGaugeValue}
       />
-      <EuiSpacer size="s" />
 
       <SelectOption
         disabled={stateParams.gauge.colorsRange.length < 2}
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/chart_options.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/chart_options.tsx
index 9a81a1de1c0d6..ba41ad802ade4 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/chart_options.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/chart_options.tsx
@@ -19,7 +19,7 @@
 
 import React, { useMemo, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { VisOptionsProps } from 'ui/vis/editors/default';
 import { BasicVislibParams, SeriesParam, ValueAxis } from '../../../types';
@@ -88,6 +88,8 @@ function ChartOptions({
         setValue={setValueAxis}
       />
 
+      <EuiSpacer size="m" />
+
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <SelectOption
@@ -116,15 +118,19 @@ function ChartOptions({
       </EuiFlexGroup>
 
       {chart.type === ChartTypes.AREA && (
-        <SelectOption
-          label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.series.lineModeLabel', {
-            defaultMessage: 'Line mode',
-          })}
-          options={vis.type.editorConfig.collections.interpolationModes}
-          paramName="interpolate"
-          value={chart.interpolate}
-          setValue={setChart}
-        />
+        <>
+          <EuiSpacer size="m" />
+
+          <SelectOption
+            label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.series.lineModeLabel', {
+              defaultMessage: 'Line mode',
+            })}
+            options={vis.type.editorConfig.collections.interpolationModes}
+            paramName="interpolate"
+            value={chart.interpolate}
+            setValue={setChart}
+          />
+        </>
       )}
 
       {chart.type === ChartTypes.LINE && (
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx
index 62ad2601f0e33..868a8ce29b466 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx
@@ -18,7 +18,7 @@
  */
 
 import React, { useCallback } from 'react';
-import { EuiTitle, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -58,6 +58,7 @@ function LabelOptions({ stateParams, setValue, axis, axesName, index }: LabelOpt
 
   return (
     <>
+      <EuiSpacer size="m" />
       <EuiTitle size="xxs">
         <h3>
           <FormattedMessage
@@ -66,6 +67,7 @@ function LabelOptions({ stateParams, setValue, axis, axesName, index }: LabelOpt
           />
         </h3>
       </EuiTitle>
+      <EuiSpacer size="s" />
 
       <SwitchOption
         label={i18n.translate(
@@ -93,6 +95,8 @@ function LabelOptions({ stateParams, setValue, axis, axesName, index }: LabelOpt
         setValue={setAxisLabel}
       />
 
+      <EuiSpacer size="m" />
+
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <SelectOption
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/line_options.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/line_options.tsx
index eb1ed014e7e96..8a4c8cc05efab 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/line_options.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/line_options.tsx
@@ -19,7 +19,7 @@
 
 import React, { useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { Vis } from 'ui/vis';
 import { SeriesParam } from '../../../types';
@@ -42,6 +42,8 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
 
   return (
     <>
+      <EuiSpacer size="m" />
+
       <SwitchOption
         label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.series.showLineLabel', {
           defaultMessage: 'Show line',
@@ -51,6 +53,8 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
         setValue={setChart}
       />
 
+      <EuiSpacer size="m" />
+
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <SelectOption
@@ -79,6 +83,8 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
         </EuiFlexItem>
       </EuiFlexGroup>
 
+      <EuiSpacer size="m" />
+
       <SwitchOption
         label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.series.showDotsLabel', {
           defaultMessage: 'Show dots',
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axis_options.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axis_options.tsx
index e7d04d7025a68..243950b762390 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axis_options.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axis_options.tsx
@@ -156,7 +156,6 @@ function ValueAxisOptions(props: ValueAxisOptionsParams) {
         label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.valueAxes.showLabel', {
           defaultMessage: 'Show axis lines and labels',
         })}
-        noStyle={true}
         paramName="show"
         value={axis.show}
         setValue={setValueAxis}
@@ -202,7 +201,7 @@ function ValueAxisOptions(props: ValueAxisOptionsParams) {
         )}
       >
         <>
-          <EuiSpacer size="s" />
+          <EuiSpacer size="m" />
           <CustomExtentsOptions
             axis={axis}
             setValueAxisScale={setValueAxisScale}
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/grid_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/grid_panel.tsx
index 6493fdd59868f..8fcc66584bc00 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/grid_panel.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/grid_panel.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { useMemo, useEffect, useCallback } from 'react';
-import { EuiPanel, EuiTitle } from '@elastic/eui';
+import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -67,6 +67,8 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
         </h2>
       </EuiTitle>
 
+      <EuiSpacer size="m" />
+
       <SwitchOption
         disabled={hasHistogramAgg}
         label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.gridAxis.xAxisLinesLabel', {
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/point_series.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/point_series.tsx
index 751adc4e9c26d..11034f7f7335e 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/point_series.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/point_series.tsx
@@ -41,7 +41,7 @@ function PointSeriesOptions(props: VisOptionsProps<BasicVislibParams>) {
             />
           </h2>
         </EuiTitle>
-        <EuiSpacer size="s" />
+        <EuiSpacer size="m" />
 
         <BasicOptions {...props} />
 
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx
index a8674b77dc985..9877b84345a1f 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx
@@ -49,7 +49,7 @@ function ThresholdPanel({ stateParams, setValue, vis }: VisOptionsProps<BasicVis
           />
         </h2>
       </EuiTitle>
-      <EuiSpacer size="s" />
+      <EuiSpacer size="m" />
 
       <SwitchOption
         label={i18n.translate('kbnVislibVisTypes.editors.pointSeries.thresholdLine.showLabel', {
diff --git a/src/legacy/ui/public/vis/editors/default/_agg.scss b/src/legacy/ui/public/vis/editors/default/_agg.scss
index b2d131053868c..e66f3185d25dc 100644
--- a/src/legacy/ui/public/vis/editors/default/_agg.scss
+++ b/src/legacy/ui/public/vis/editors/default/_agg.scss
@@ -16,6 +16,9 @@
   border: $euiBorderThick;
   border-radius: $euiBorderRadius;
   background-color: transparent;
-  margin: $euiSizeS 0;
   padding: $euiSizeS;
 }
+
+.visEditorAgg__subAgg + .visEditorAggParam__string {
+  margin-top: $euiSize;
+}
diff --git a/src/legacy/ui/public/vis/editors/default/_agg_params.scss b/src/legacy/ui/public/vis/editors/default/_agg_params.scss
index 29f2f4d0de726..81faa06681c0d 100644
--- a/src/legacy/ui/public/vis/editors/default/_agg_params.scss
+++ b/src/legacy/ui/public/vis/editors/default/_agg_params.scss
@@ -1,5 +1,5 @@
 .visEditorAggParam--half {
-  margin-top: $euiSize;
+  margin: $euiSize 0;
   display: inline-block;
   width: calc(50% - #{$euiSizeS / 2});
 }
diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss
index 5d0026ec3d884..03a9a9aaa4f45 100644
--- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss
+++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss
@@ -205,11 +205,6 @@
   }
 }
 
-.visEditorSidebar__aggParamFormRow {
-  margin-top: $euiSizeS;
-  margin-bottom: $euiSizeS;
-}
-
 .visEditorSidebar__aggGroupAccordionButtonContent {
   font-size: $euiFontSizeS;
 
@@ -217,8 +212,3 @@
     color: $euiColorDarkShade;
   }
 }
-
-.visEditorSidebar__switchOptionFormRow {
-  margin-top: $euiSizeS;
-  padding-bottom: $euiSizeS;
-}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/components/input_list.tsx b/src/legacy/ui/public/vis/editors/default/controls/components/input_list.tsx
index fecb29256de23..6dfcca479e89b 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/components/input_list.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/components/input_list.tsx
@@ -177,7 +177,7 @@ function InputList({ config, list, onChange, setValidity }: InputListProps) {
     <>
       {models.map((item, index) => (
         <Fragment key={item.id}>
-          <EuiFlexGroup gutterSize="xs" alignItems="center">
+          <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
             {config.renderInputRow(item, index, onChangeValue)}
             <EuiFlexItem grow={false}>
               <EuiButtonIcon
diff --git a/src/legacy/ui/public/vis/editors/default/controls/components/mask_list.tsx b/src/legacy/ui/public/vis/editors/default/controls/components/mask_list.tsx
index 101447ad51e76..7d964204ff90c 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/components/mask_list.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/components/mask_list.tsx
@@ -78,6 +78,7 @@ function MaskList({ showValidation, onBlur, ...rest }: MaskListProps) {
             values: { mask: mask.value || '*' },
           })}
           compressed
+          fullWidth
           isInvalid={showValidation ? mask.isInvalid : false}
           placeholder="*"
           onChange={ev => {
diff --git a/src/legacy/ui/public/vis/editors/default/controls/extended_bounds.tsx b/src/legacy/ui/public/vis/editors/default/controls/extended_bounds.tsx
index ac102165ce7bb..dba8c2f871352 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/extended_bounds.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/extended_bounds.tsx
@@ -75,44 +75,33 @@ function ExtendedBoundsParamEditor({
   };
 
   return (
-    <EuiFormRow
-      fullWidth={true}
-      isInvalid={showValidation ? !isValid : false}
-      error={error}
-      compressed
-    >
-      <>
-        {/*
-          We have to put it into React.Fragment to avoid errors:
-          EuiFormRow will try to put "compressed" as attribute into a EuiFlexGroup div
-        */}
-        <EuiFlexGroup gutterSize="s">
-          <EuiFlexItem>
-            <EuiFieldNumber
-              value={isUndefined(value.min) ? '' : value.min}
-              onChange={ev => handleChange(ev, 'min')}
-              onBlur={setTouched}
-              fullWidth={true}
-              isInvalid={showValidation ? !isValid : false}
-              aria-label={minLabel}
-              prepend={minLabel}
-              compressed
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFieldNumber
-              value={isUndefined(value.max) ? '' : value.max}
-              onChange={ev => handleChange(ev, 'max')}
-              onBlur={setTouched}
-              fullWidth={true}
-              isInvalid={showValidation ? !isValid : false}
-              aria-label={maxLabel}
-              prepend={maxLabel}
-              compressed
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </>
+    <EuiFormRow fullWidth={true} isInvalid={showValidation ? !isValid : false} error={error}>
+      <EuiFlexGroup gutterSize="s" responsive={false}>
+        <EuiFlexItem>
+          <EuiFieldNumber
+            value={isUndefined(value.min) ? '' : value.min}
+            onChange={ev => handleChange(ev, 'min')}
+            onBlur={setTouched}
+            fullWidth={true}
+            isInvalid={showValidation ? !isValid : false}
+            aria-label={minLabel}
+            prepend={minLabel}
+            compressed
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFieldNumber
+            value={isUndefined(value.max) ? '' : value.max}
+            onChange={ev => handleChange(ev, 'max')}
+            onBlur={setTouched}
+            fullWidth={true}
+            isInvalid={showValidation ? !isValid : false}
+            aria-label={maxLabel}
+            prepend={maxLabel}
+            compressed
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFormRow>
   );
 }
diff --git a/src/legacy/ui/public/vis/editors/default/controls/filter.tsx b/src/legacy/ui/public/vis/editors/default/controls/filter.tsx
index f81734f537426..779d5acf5b411 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/filter.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/filter.tsx
@@ -129,7 +129,7 @@ function FilterRow({
           />
         </EuiFormRow>
       ) : null}
-      <EuiSpacer />
+      <EuiSpacer size="m" />
     </EuiForm>
   );
 }
diff --git a/src/legacy/ui/public/vis/editors/default/controls/ip_range_type.tsx b/src/legacy/ui/public/vis/editors/default/controls/ip_range_type.tsx
index da298b767fc5c..380052e693a89 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/ip_range_type.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/ip_range_type.tsx
@@ -50,6 +50,7 @@ function IpRangeTypeParamEditor({ agg, value, setValue }: AggParamEditorProps<Ip
 
   return (
     <>
+      <EuiSpacer size="m" />
       <EuiButtonGroup
         isFullWidth={true}
         onChange={onClick}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/order_agg.tsx b/src/legacy/ui/public/vis/editors/default/controls/order_agg.tsx
index 2913c8a4af8d7..9d337035f8734 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/order_agg.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/order_agg.tsx
@@ -18,6 +18,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
+import { EuiSpacer } from '@elastic/eui';
 import { AggParamType } from '../../../../agg_types/param_types/agg';
 import { AggConfig } from '../../..';
 import { AggParamEditorProps, DefaultEditorAggParams } from '..';
@@ -57,23 +58,26 @@ function OrderAggParamEditor({
   }
 
   return (
-    <DefaultEditorAggParams
-      agg={value as AggConfig}
-      groupName="metrics"
-      className="visEditorAgg__subAgg"
-      formIsTouched={subAggParams.formIsTouched}
-      indexPattern={agg.getIndexPattern()}
-      metricAggs={metricAggs}
-      state={state}
-      onAggParamsChange={(...rest) => {
-        // to force update when sub-agg params are changed
-        setInnerState(!innerState);
-        subAggParams.onAggParamsChange(...rest);
-      }}
-      onAggTypeChange={subAggParams.onAggTypeChange}
-      setValidity={setValidity}
-      setTouched={setTouched}
-    />
+    <>
+      <EuiSpacer size="m" />
+      <DefaultEditorAggParams
+        agg={value as AggConfig}
+        groupName="metrics"
+        className="visEditorAgg__subAgg"
+        formIsTouched={subAggParams.formIsTouched}
+        indexPattern={agg.getIndexPattern()}
+        metricAggs={metricAggs}
+        state={state}
+        onAggParamsChange={(...rest) => {
+          // to force update when sub-agg params are changed
+          setInnerState(!innerState);
+          subAggParams.onAggParamsChange(...rest);
+        }}
+        onAggTypeChange={subAggParams.onAggTypeChange}
+        setValidity={setValidity}
+        setTouched={setTouched}
+      />
+    </>
   );
 }
 
diff --git a/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx b/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx
index 02f6bb404db0c..595ab6e0faf46 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx
@@ -18,7 +18,7 @@
  */
 
 import React, { useEffect } from 'react';
-import { EuiFormRow, EuiIconTip, EuiRange } from '@elastic/eui';
+import { EuiFormRow, EuiIconTip, EuiRange, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { AggControlProps } from './agg_control_props';
@@ -50,21 +50,24 @@ function RadiusRatioOptionControl({ editorStateParams, setValue }: AggControlPro
   }, []);
 
   return (
-    <EuiFormRow fullWidth={true} label={label} compressed>
-      <EuiRange
-        compressed
-        fullWidth={true}
-        min={1}
-        max={100}
-        value={editorStateParams.radiusRatio || DEFAULT_VALUE}
-        onChange={(e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) =>
-          setValue(editorStateParams, PARAM_NAME, parseFloat(e.currentTarget.value))
-        }
-        showRange
-        showValue
-        valueAppend="%"
-      />
-    </EuiFormRow>
+    <>
+      <EuiFormRow fullWidth={true} label={label} compressed>
+        <EuiRange
+          compressed
+          fullWidth={true}
+          min={1}
+          max={100}
+          value={editorStateParams.radiusRatio || DEFAULT_VALUE}
+          onChange={(
+            e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>
+          ) => setValue(editorStateParams, PARAM_NAME, parseFloat(e.currentTarget.value))}
+          showRange
+          showValue
+          valueAppend="%"
+        />
+      </EuiFormRow>
+      <EuiSpacer size="m" />
+    </>
   );
 }
 
diff --git a/src/legacy/ui/public/vis/editors/default/controls/rows_or_columns.tsx b/src/legacy/ui/public/vis/editors/default/controls/rows_or_columns.tsx
index 5ded9d945bc4e..6adaef03963c6 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/rows_or_columns.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/rows_or_columns.tsx
@@ -18,7 +18,7 @@
  */
 
 import React from 'react';
-import { EuiButtonGroup, EuiFormRow } from '@elastic/eui';
+import { EuiButtonGroup, EuiFormRow, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { AggControlProps } from './agg_control_props';
 
@@ -46,12 +46,8 @@ function RowsOrColumnsControl({ aggParams, setValue }: AggControlProps<boolean>)
   ];
 
   return (
-    <EuiFormRow compressed fullWidth={true} className="visEditorSidebar__aggParamFormRow">
-      <>
-        {/*
-          We have to put it into React.Fragment to avoid errors:
-          EuiFormRow will try to put "compressed" as attribute into a EuiButtonGroup div
-        */}
+    <>
+      <EuiFormRow compressed fullWidth={true}>
         <EuiButtonGroup
           data-test-subj="visEditorSplitBy"
           legend={i18n.translate('common.ui.vis.defaultEditor.controls.splitByLegend', {
@@ -62,8 +58,9 @@ function RowsOrColumnsControl({ aggParams, setValue }: AggControlProps<boolean>)
           idSelected={idSelected}
           onChange={optionId => setValue(aggParams, PARAMS.NAME, optionId === PARAMS.ROWS)}
         />
-      </>
-    </EuiFormRow>
+      </EuiFormRow>
+      <EuiSpacer size="m" />
+    </>
   );
 }
 
diff --git a/src/legacy/ui/public/vis/editors/default/controls/string.tsx b/src/legacy/ui/public/vis/editors/default/controls/string.tsx
index e48c623e9b931..63827205afdb3 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/string.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/string.tsx
@@ -39,6 +39,7 @@ function StringParamEditor({
 
   return (
     <EuiFormRow
+      className="visEditorAggParam__string"
       label={aggParam.displayName || aggParam.name}
       fullWidth={true}
       compressed
diff --git a/src/legacy/ui/public/vis/editors/default/controls/sub_agg.tsx b/src/legacy/ui/public/vis/editors/default/controls/sub_agg.tsx
index 00f44ab1f6cc4..559a3f47db563 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/sub_agg.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/sub_agg.tsx
@@ -18,6 +18,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
+import { EuiSpacer } from '@elastic/eui';
 import { AggParamType } from '../../../../agg_types/param_types/agg';
 import { AggConfig } from '../../..';
 import { AggParamEditorProps, DefaultEditorAggParams } from '..';
@@ -51,23 +52,26 @@ function SubAggParamEditor({
   }
 
   return (
-    <DefaultEditorAggParams
-      agg={agg.params.customMetric}
-      groupName="metrics"
-      className="visEditorAgg__subAgg"
-      formIsTouched={subAggParams.formIsTouched}
-      indexPattern={agg.getIndexPattern()}
-      metricAggs={metricAggs}
-      state={state}
-      onAggParamsChange={(...rest) => {
-        // to force update when sub-agg params are changed
-        setInnerState(!innerState);
-        subAggParams.onAggParamsChange(...rest);
-      }}
-      onAggTypeChange={subAggParams.onAggTypeChange}
-      setValidity={setValidity}
-      setTouched={setTouched}
-    />
+    <>
+      <EuiSpacer size="m" />
+      <DefaultEditorAggParams
+        agg={agg.params.customMetric}
+        groupName="metrics"
+        className="visEditorAgg__subAgg"
+        formIsTouched={subAggParams.formIsTouched}
+        indexPattern={agg.getIndexPattern()}
+        metricAggs={metricAggs}
+        state={state}
+        onAggParamsChange={(...rest) => {
+          // to force update when sub-agg params are changed
+          setInnerState(!innerState);
+          subAggParams.onAggParamsChange(...rest);
+        }}
+        onAggTypeChange={subAggParams.onAggTypeChange}
+        setValidity={setValidity}
+        setTouched={setTouched}
+      />
+    </>
   );
 }
 
diff --git a/src/legacy/ui/public/vis/editors/default/controls/sub_metric.tsx b/src/legacy/ui/public/vis/editors/default/controls/sub_metric.tsx
index 0d4816306d12c..836049eb95cab 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/sub_metric.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/sub_metric.tsx
@@ -64,6 +64,7 @@ function SubMetricParamEditor({
 
   return (
     <>
+      <EuiSpacer size="m" />
       <EuiFormLabel>{aggTitle}</EuiFormLabel>
       <EuiSpacer size="s" />
       <DefaultEditorAggParams
diff --git a/src/legacy/ui/public/vis/editors/default/controls/switch.tsx b/src/legacy/ui/public/vis/editors/default/controls/switch.tsx
index ebcc875d41f34..b698a7bb217e7 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/switch.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/switch.tsx
@@ -19,7 +19,7 @@
 
 import React from 'react';
 
-import { EuiSwitch, EuiToolTip, EuiSpacer } from '@elastic/eui';
+import { EuiFormRow, EuiSwitch, EuiToolTip } from '@elastic/eui';
 import { AggParamEditorProps } from '..';
 
 interface SwitchParamEditorProps extends AggParamEditorProps<boolean> {
@@ -38,13 +38,8 @@ function SwitchParamEditor({
   disabled,
 }: SwitchParamEditorProps) {
   return (
-    <div className="visEditorSidebar__aggParamFormRow">
-      <EuiToolTip
-        content={displayToolTip}
-        delay="long"
-        position="right"
-        anchorClassName="eui-displayBlock"
-      >
+    <EuiFormRow fullWidth={true}>
+      <EuiToolTip content={displayToolTip} delay="long" position="right">
         <EuiSwitch
           label={displayLabel}
           checked={value}
@@ -53,8 +48,7 @@ function SwitchParamEditor({
           onChange={ev => setValue(ev.target.checked)}
         />
       </EuiToolTip>
-      <EuiSpacer size="s" />
-    </div>
+    </EuiFormRow>
   );
 }