diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss
index b219f59476ce9..fd074edf032fa 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss
@@ -1,3 +1,4 @@
 @import './layer_panel';
 @import './filter_editor/filter_editor';
-@import './join_editor/resources/join';
\ No newline at end of file
+@import './join_editor/resources/join';
+@import './style_settings/style_settings';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss
new file mode 100644
index 0000000000000..249b6dfca5c76
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss
@@ -0,0 +1,3 @@
+.mapStyleSettings__fixedBox {
+    width: $euiSize * 7.5;
+}
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js
index 2857065f04c70..69cf51fb29c0d 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js
@@ -21,7 +21,7 @@ export function StyleSettings({ layer, updateStyleDescriptor }) {
 
   return (
     <Fragment>
-      <EuiPanel>
+      <EuiPanel className="mapStyleSettings">
         <EuiFlexGroup>
           <EuiFlexItem>
             <EuiTitle size="xs">
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss
index 001ca0685d0e9..519e97f4b30cd 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss
@@ -1,6 +1,5 @@
 .mapColorStop {
   position: relative;
-  padding-right: $euiSizeXL + $euiSizeS;
 
   & + & {
     margin-top: $euiSizeS;
@@ -17,23 +16,3 @@
   }
 }
 
-.mapColorStop__icons {
-  flex-shrink: 0;
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  margin-right: -$euiSizeS;
-  margin-top: -$euiSizeM;
-}
-
-@keyframes mapColorStopBecomeVisible {
-
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
index e8d5754ef4206..436a92b619909 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
@@ -105,6 +105,7 @@ export class ColorMapSelect extends Component {
           onChange={this._onColorMapSelect}
           valueOfSelected={valueOfSelected}
           hasDividers={true}
+          compressed
         />
         {this._renderColorStopsInput()}
       </Fragment>
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js
index 47c2d037e0c79..3e9b9e2aafc47 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js
@@ -10,7 +10,19 @@ import { removeRow, isColorInvalid } from './color_stops_utils';
 import { i18n } from '@kbn/i18n';
 import { EuiButtonIcon, EuiColorPicker, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 
-function getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, onAdd }) {
+function getColorStopRow({ index, errors, stopInput, onColorChange, color, deleteButton, onAdd }) {
+  const colorPickerButtons = (
+    <div className="mapColorStop__icons">
+      {deleteButton}
+      <EuiButtonIcon
+        iconType="plusInCircle"
+        color="primary"
+        aria-label="Add"
+        title="Add"
+        onClick={onAdd}
+      />
+    </div>
+  );
   return (
     <EuiFormRow
       key={index}
@@ -19,22 +31,19 @@ function getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, o
       error={errors}
       display="rowCompressed"
     >
-      <div>
-        <EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
-          <EuiFlexItem>{stopInput}</EuiFlexItem>
-          <EuiFlexItem>{colorInput}</EuiFlexItem>
-        </EuiFlexGroup>
-        <div className="mapColorStop__icons">
-          {deleteButton}
-          <EuiButtonIcon
-            iconType="plusInCircle"
-            color="primary"
-            aria-label="Add"
-            title="Add"
-            onClick={onAdd}
+      <EuiFlexGroup alignItems="center" gutterSize="xs">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {stopInput}
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiColorPicker
+            onChange={onColorChange}
+            color={color}
+            compressed
+            append={colorPickerButtons}
           />
-        </div>
-      </div>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFormRow>
   );
 }
@@ -80,17 +89,6 @@ export const ColorStops = ({
     };
   }
 
-  function getColorInput(onColorChange, color) {
-    return {
-      colorError: isColorInvalid(color)
-        ? i18n.translate('xpack.maps.styles.colorStops.hexWarningLabel', {
-            defaultMessage: 'Color must provide a valid hex value',
-          })
-        : undefined,
-      colorInput: <EuiColorPicker onChange={onColorChange} color={color} compressed />,
-    };
-  }
-
   const rows = colorStops.map((colorStop, index) => {
     const onColorChange = color => {
       const newColorStops = _.cloneDeep(colorStops);
@@ -102,7 +100,15 @@ export const ColorStops = ({
     };
 
     const { stopError, stopInput } = getStopInput(colorStop.stop, index);
-    const { colorError, colorInput } = getColorInput(onColorChange, colorStop.color);
+
+    const color = colorStop.color;
+
+    const colorError = isColorInvalid(color)
+      ? i18n.translate('xpack.maps.styles.colorStops.hexWarningLabel', {
+          defaultMessage: 'Color must provide a valid hex value',
+        })
+      : undefined;
+
     const errors = [];
     if (stopError) {
       errors.push(stopError);
@@ -131,7 +137,7 @@ export const ColorStops = ({
       deleteButton = getDeleteButton(onRemove);
     }
 
-    return getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, onAdd });
+    return getColorStopRow({ index, errors, stopInput, onColorChange, color, deleteButton, onAdd });
   });
 
   return <div>{rows}</div>;
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
index af5e5b37f5467..3dc356c31cf30 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
@@ -90,8 +90,10 @@ export function DynamicColorForm({
 
   return (
     <Fragment>
-      <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-        <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {staticDynamicSelect}
+        </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
             fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js
index 48befa1ca74c0..ab1634a53a966 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js
@@ -18,8 +18,10 @@ export function StaticColorForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <EuiColorPicker
           onChange={onColorChange}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
index 7ad541efe0ab7..0c9011b811f38 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
@@ -21,8 +21,10 @@ export function DynamicLabelForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <FieldSelect
           fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js
index 721487b5d8ff0..3b7145fdfc884 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js
@@ -14,8 +14,10 @@ export function StaticLabelForm({ onStaticStyleChange, staticDynamicSelect, styl
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <EuiFieldText
           placeholder={i18n.translate('xpack.maps.styles.staticLabel.valuePlaceholder', {
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
index df0ae6513f8ed..5879e94991054 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
@@ -24,8 +24,10 @@ export function DynamicOrientationForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <FieldSelect
           fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js
index 8c4418f95e1d2..b28743f426262 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js
@@ -14,8 +14,10 @@ export function StaticOrientationForm({ onStaticStyleChange, staticDynamicSelect
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <ValidatedRange
           min={0}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
index 141a941017790..4918c2d906eef 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
@@ -44,8 +44,10 @@ export function DynamicSizeForm({
 
   return (
     <Fragment>
-      <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-        <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {staticDynamicSelect}
+        </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
             fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js
index d8fe1322db3e3..90e540cc6802a 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js
@@ -15,8 +15,10 @@ export function StaticSizeForm({ onStaticStyleChange, staticDynamicSelect, style
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <ValidatedRange
           min={0}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
index f1180a3a56494..b9f04711286c9 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
@@ -97,8 +97,10 @@ export class StylePropEditor extends Component {
         anchorClassName="mapStyleFormDisabledTooltip"
         content={getDisabledByMessage(this.props.disabledBy)}
       >
-        <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+        <EuiFlexGroup gutterSize="xs">
+          <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+            {staticDynamicSelect}
+          </EuiFlexItem>
           <EuiFlexItem>
             <EuiFieldText compressed disabled />
           </EuiFlexItem>
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
index 706dc0763b7ca..8fa69e1a5b467 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
@@ -34,7 +34,7 @@ exports[`Should render icon select 1`] = `
     </EuiFormControlLayout>
   }
   closePopover={[Function]}
-  display="inlineBlock"
+  display="block"
   hasArrow={true}
   isOpen={false}
   ownFocus={true}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
index afa11daf45217..9065102dc8bd7 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
@@ -53,8 +53,10 @@ export function DynamicIconForm({
 
   return (
     <Fragment>
-      <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-        <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {staticDynamicSelect}
+        </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
             fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js
index 68f7a30b22862..41cba1b76d97a 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js
@@ -128,6 +128,7 @@ export class IconSelect extends Component {
         closePopover={this._closePopover}
         anchorPosition="downLeft"
         panelPaddingSize="s"
+        display="block"
       >
         <EuiFocusTrap clickOutsideDisables={true}>{this._renderIconSelectable()}</EuiFocusTrap>
       </EuiPopover>
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js
index b20d8f2eba162..9b00b2fe38d7b 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js
@@ -20,8 +20,10 @@ export function StaticIconForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <IconSelect
           isDarkMode={isDarkMode}