Allign colorscale pickers

Author: dmt0

src/components/fields/ColorscalePicker.js

@@ -30,7 +30,7 @@ export class UnconnectedColorscalePicker extends Component {
     const colorscale = Array.isArray(fullValue) ? fullValue.map(v => v[1]) : null;
 
     return (
-      <Field {...this.props}>
+      <Field {...this.props} fieldContainerClassName="field__colorscale">
         <ColorscalePickerWidget
           selected={colorscale}
           onColorscaleChange={this.onUpdate}

src/components/widgets/ColorscalePicker.js

@@ -41,8 +41,9 @@ class Scale extends Component {
 
     return (
       <div className="customPickerContainer__outer">
-        <Colorscale colorscale={selected} onClick={this.onClick} />
-
+        <div className="customPickerContainer__inner">
+          <Colorscale colorscale={selected} onClick={this.onClick} />
+        </div>
         {showColorscalePicker ? (
           <div className="customPickerContainer">
             <Dropdown

src/styles/components/fields/_field.scss

@@ -78,6 +78,12 @@
     }
   }
 
+  &__colorscale {
+    .field__widget {
+      padding-right: 0;
+    }
+  }
+
   .rect,
   .square {
     border-color: var(--color-accent);

src/styles/components/widgets/_colorscalepicker.scss

@@ -1,4 +1,5 @@
 $colorscalepicker-width: 215px;
+$colorscalepicker-height: 20px;
 
 .colorscalePickerContainer {
   min-width: $colorscalepicker-width;
@@ -42,4 +43,8 @@ $colorscalepicker-width: 215px;
     width: $colorscalepicker-width;
     text-align: center;
   }
+
+  &__inner {
+    height: $colorscalepicker-height;
+  }
 }