diff --git a/src/plugins/kibana_react/public/field_button/field_button.tsx b/src/plugins/kibana_react/public/field_button/field_button.tsx
index 97d1b32746120..4c0298a65ba5d 100644
--- a/src/plugins/kibana_react/public/field_button/field_button.tsx
+++ b/src/plugins/kibana_react/public/field_button/field_button.tsx
@@ -19,7 +19,8 @@
 
 import './field_button.scss';
 import classNames from 'classnames';
-import React, { ReactNode, HTMLAttributes } from 'react';
+import React, { ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { CommonProps } from '@elastic/eui';
 
 export interface FieldButtonProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -56,7 +57,14 @@ export interface FieldButtonProps extends HTMLAttributes<HTMLDivElement> {
    * The component will render a `<button>` when provided an `onClick`
    */
   onClick?: () => void;
+  /**
+   * Applies to the inner `<button>`  or `<div>`
+   */
   dataTestSubj?: string;
+  /**
+   * Pass more button props to the `<button>` element
+   */
+  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement> & CommonProps;
 }
 
 const sizeToClassNameMap = {
@@ -79,6 +87,8 @@ export function FieldButton({
   isDraggable = false,
   onClick,
   dataTestSubj,
+  buttonProps,
+  ...rest
 }: FieldButtonProps) {
   const classes = classNames(
     'kbnFieldButton',
@@ -88,8 +98,18 @@ export function FieldButton({
     className
   );
 
+  const contentClasses = classNames('kbn-resetFocusState', 'kbnFieldButton__button');
+
+  const innerContent = (
+    <>
+      {fieldIcon && <span className="kbnFieldButton__fieldIcon">{fieldIcon}</span>}
+      {fieldName && <span className="kbnFieldButton__name">{fieldName}</span>}
+      {fieldInfoIcon && <div className="kbnFieldButton__infoIcon">{fieldInfoIcon}</div>}
+    </>
+  );
+
   return (
-    <div className={classes}>
+    <div className={classes} {...rest}>
       {onClick ? (
         <button
           onClick={(e) => {
@@ -99,17 +119,14 @@ export function FieldButton({
             onClick();
           }}
           data-test-subj={dataTestSubj}
-          className={'kbn-resetFocusState kbnFieldButton__button'}
+          className={contentClasses}
+          {...buttonProps}
         >
-          {fieldIcon && <span className="kbnFieldButton__fieldIcon">{fieldIcon}</span>}
-          {fieldName && <span className="kbnFieldButton__name">{fieldName}</span>}
-          {fieldInfoIcon && <div className="kbnFieldButton__infoIcon">{fieldInfoIcon}</div>}
+          {innerContent}
         </button>
       ) : (
-        <div className={'kbn-resetFocusState kbnFieldButton__button'} data-test-subj={dataTestSubj}>
-          {fieldIcon && <span className="kbnFieldButton__fieldIcon">{fieldIcon}</span>}
-          {fieldName && <span className="kbnFieldButton__name">{fieldName}</span>}
-          {fieldInfoIcon && <div className="kbnFieldButton__infoIcon">{fieldInfoIcon}</div>}
+        <div className={contentClasses} data-test-subj={dataTestSubj}>
+          {innerContent}
         </div>
       )}
 
diff --git a/x-pack/plugins/lens/public/_mixins.scss b/x-pack/plugins/lens/public/_mixins.scss
index a3cf6caa5a429..0db72d118cef1 100644
--- a/x-pack/plugins/lens/public/_mixins.scss
+++ b/x-pack/plugins/lens/public/_mixins.scss
@@ -11,3 +11,39 @@
     transparentize(red, .9) 100%
   );
 }
+
+// Static styles for a draggable item
+@mixin lnsDraggable {
+  @include euiSlightShadow;
+  background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade);
+  border: $euiBorderWidthThin dashed transparent;
+  cursor: grab;
+}
+
+// Static styles for a drop area
+@mixin lnsDroppable {
+  border: $euiBorderWidthThin dashed $euiBorderColor;
+}
+
+// Hovering state for drag item and drop area
+@mixin lnsDragDropHover {
+  &:hover {
+    border: $euiBorderWidthThin dashed $euiColorMediumShade;
+  }
+}
+
+// Style for drop area when there's an item being dragged
+@mixin lnsDroppableActive {
+  background-color: transparentize($euiColorVis0, .9);
+}
+
+// Style for drop area while hovering with item
+@mixin lnsDroppableActiveHover {
+  background-color: transparentize($euiColorVis0, .75);
+  border: $euiBorderWidthThin dashed $euiColorVis0;
+}
+
+// Style for drop area that is not allowed for current item
+@mixin lnsDroppableNotAllowed {
+  opacity: .5;
+}
diff --git a/x-pack/plugins/lens/public/drag_drop/__snapshots__/drag_drop.test.tsx.snap b/x-pack/plugins/lens/public/drag_drop/__snapshots__/drag_drop.test.tsx.snap
index 3581151dd5f76..dc53f3a2bc2a7 100644
--- a/x-pack/plugins/lens/public/drag_drop/__snapshots__/drag_drop.test.tsx.snap
+++ b/x-pack/plugins/lens/public/drag_drop/__snapshots__/drag_drop.test.tsx.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DragDrop droppable is reflected in the className 1`] = `
-<div
-  class="lnsDragDrop lnsDragDrop-isDropTarget"
+<button
+  class="lnsDragDrop lnsDragDrop-isDroppable lnsDragDrop-isDropTarget"
   data-test-subj="lnsDragDrop"
 >
   Hello!
-</div>
+</button>
 `;
 
 exports[`DragDrop items that have droppable=false get special styling when another item is dragged 1`] = `
-<div
-  className="lnsDragDrop lnsDragDrop-isNotDroppable"
+<button
+  className="lnsDragDrop lnsDragDrop-isDroppable lnsDragDrop-isNotDroppable"
   data-test-subj="lnsDragDrop"
   onDragEnd={[Function]}
   onDragLeave={[Function]}
@@ -20,15 +20,15 @@ exports[`DragDrop items that have droppable=false get special styling when anoth
   onDrop={[Function]}
 >
   Hello!
-</div>
+</button>
 `;
 
 exports[`DragDrop renders if nothing is being dragged 1`] = `
-<div
-  class="lnsDragDrop"
+<button
+  class="lnsDragDrop lnsDragDrop-isDraggable"
   data-test-subj="lnsDragDrop"
   draggable="true"
 >
   Hello!
-</div>
+</button>
 `;
diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.scss b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss
index c971540e165c1..410aaef9a5195 100644
--- a/x-pack/plugins/lens/public/drag_drop/drag_drop.scss
+++ b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss
@@ -1,13 +1,54 @@
-.lnsDragDrop-isNotDroppable {
-  opacity: .5;
+@import '../variables';
+@import '../mixins';
+
+.lnsDragDrop {
+  transition: background-color $euiAnimSpeedFast ease-in-out, border-color $euiAnimSpeedFast ease-in-out;
+}
+
+// Draggable item
+.lnsDragDrop-isDraggable {
+  @include lnsDraggable;
+  @include lnsDragDropHover;
+
+  // Include a possible nested button like when using FieldButton
+  > .kbnFieldButton__button {
+    cursor: grab;
+  }
+
+  &:focus {
+    @include euiFocusRing;
+  }
+}
+
+// Draggable item when it is moving
+.lnsDragDrop-isHidden {
+  opacity: 0;
+}
+
+// Drop area
+.lnsDragDrop-isDroppable {
+  @include lnsDroppable;
 }
 
-// Fix specificity by chaining classes
+// Drop area when there's an item being dragged
+.lnsDragDrop-isDropTarget {
+  @include lnsDroppableActive;
+}
 
-.lnsDragDrop.lnsDragDrop-isDropTarget {
-  background-color: transparentize($euiColorSecondary, .9);
+// Drop area while hovering with item
+.lnsDragDrop-isActiveDropTarget {
+  @include lnsDroppableActiveHover;
+}
+
+// Drop area that is not allowed for current item
+.lnsDragDrop-isNotDroppable {
+  @include lnsDroppableNotAllowed;
 }
 
-.lnsDragDrop.lnsDragDrop-isActiveDropTarget {
-  background-color: transparentize($euiColorSecondary, .75);
+// Drop area will be replacing existing content
+.lnsDragDrop-isReplacing {
+  &,
+  .lnsLayerPanel__triggerLink {
+    text-decoration: line-through;
+  }
 }
diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.test.tsx b/x-pack/plugins/lens/public/drag_drop/drag_drop.test.tsx
index 3240357c254ea..b1cc4c06c2165 100644
--- a/x-pack/plugins/lens/public/drag_drop/drag_drop.test.tsx
+++ b/x-pack/plugins/lens/public/drag_drop/drag_drop.test.tsx
@@ -15,7 +15,7 @@ describe('DragDrop', () => {
   test('renders if nothing is being dragged', () => {
     const component = render(
       <DragDrop value="hello" draggable label="dragging">
-        Hello!
+        <button>Hello!</button>
       </DragDrop>
     );
 
@@ -24,7 +24,11 @@ describe('DragDrop', () => {
 
   test('dragover calls preventDefault if droppable is true', () => {
     const preventDefault = jest.fn();
-    const component = mount(<DragDrop droppable>Hello!</DragDrop>);
+    const component = mount(
+      <DragDrop droppable>
+        <button>Hello!</button>
+      </DragDrop>
+    );
 
     component.find('[data-test-subj="lnsDragDrop"]').simulate('dragover', { preventDefault });
 
@@ -33,7 +37,11 @@ describe('DragDrop', () => {
 
   test('dragover does not call preventDefault if droppable is false', () => {
     const preventDefault = jest.fn();
-    const component = mount(<DragDrop>Hello!</DragDrop>);
+    const component = mount(
+      <DragDrop>
+        <button>Hello!</button>
+      </DragDrop>
+    );
 
     component.find('[data-test-subj="lnsDragDrop"]').simulate('dragover', { preventDefault });
 
@@ -51,7 +59,7 @@ describe('DragDrop', () => {
     const component = mount(
       <ChildDragDropProvider dragging={value} setDragging={setDragging}>
         <DragDrop value={value} draggable={true} label="drag label">
-          Hello!
+          <button>Hello!</button>
         </DragDrop>
       </ChildDragDropProvider>
     );
@@ -74,7 +82,7 @@ describe('DragDrop', () => {
     const component = mount(
       <ChildDragDropProvider dragging="hola" setDragging={setDragging}>
         <DragDrop onDrop={onDrop} droppable={true} value={value}>
-          Hello!
+          <button>Hello!</button>
         </DragDrop>
       </ChildDragDropProvider>
     );
@@ -98,7 +106,7 @@ describe('DragDrop', () => {
     const component = mount(
       <ChildDragDropProvider dragging="hola" setDragging={setDragging}>
         <DragDrop onDrop={onDrop} droppable={false} value={{}}>
-          Hello!
+          <button>Hello!</button>
         </DragDrop>
       </ChildDragDropProvider>
     );
@@ -121,7 +129,7 @@ describe('DragDrop', () => {
         }}
         droppable
       >
-        Hello!
+        <button>Hello!</button>
       </DragDrop>
     );
 
@@ -132,10 +140,10 @@ describe('DragDrop', () => {
     const component = mount(
       <ChildDragDropProvider dragging={'ignored'} setDragging={() => {}}>
         <DragDrop value="ignored" draggable={true} label="a">
-          Ignored
+          <button>Hello!</button>
         </DragDrop>
         <DragDrop onDrop={(x: unknown) => {}} droppable={false}>
-          Hello!
+          <button>Hello!</button>
         </DragDrop>
       </ChildDragDropProvider>
     );
@@ -154,14 +162,14 @@ describe('DragDrop', () => {
         }}
       >
         <DragDrop value="ignored" draggable={true} label="a">
-          Ignored
+          <button>Hello!</button>
         </DragDrop>
         <DragDrop
           onDrop={(x: unknown) => {}}
           droppable
           getAdditionalClassesOnEnter={getAdditionalClasses}
         >
-          Hello!
+          <button>Hello!</button>
         </DragDrop>
       </ChildDragDropProvider>
     );
diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx b/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx
index 6941974a63cd3..b36415fee5b15 100644
--- a/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx
+++ b/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx
@@ -41,9 +41,14 @@ interface BaseProps {
   value?: unknown;
 
   /**
-   * The React children.
+   * Optional comparison function to check whether a value is the dragged one
    */
-  children: React.ReactNode;
+  isValueEqual?: (value1: unknown, value2: unknown) => boolean;
+
+  /**
+   * The React element which will be passed the draggable handlers
+   */
+  children: React.ReactElement;
 
   /**
    * Indicates whether or not the currently dragged item
@@ -60,6 +65,18 @@ interface BaseProps {
    * The optional test subject associated with this DOM element.
    */
   'data-test-subj'?: string;
+
+  /**
+   * Indicates to the user whether the currently dragged item
+   * will be moved or copied
+   */
+  dragType?: 'copy' | 'move';
+
+  /**
+   * Indicates to the user whether the drop action will
+   * replace something that is existing or add a new one
+   */
+  dropType?: 'add' | 'replace';
 }
 
 /**
@@ -98,12 +115,14 @@ type Props = DraggableProps | NonDraggableProps;
 
 export const DragDrop = (props: Props) => {
   const { dragging, setDragging } = useContext(DragContext);
-  const { value, draggable, droppable } = props;
+  const { value, draggable, droppable, isValueEqual } = props;
   return (
     <DragDropInner
       {...props}
       dragging={droppable ? dragging : undefined}
-      isDragging={!!(draggable && value === dragging)}
+      isDragging={
+        !!(draggable && ((isValueEqual && isValueEqual(value, dragging)) || value === dragging))
+      }
       isNotDroppable={
         // If the configuration has provided a droppable flag, but this particular item is not
         // droppable, then it should be less prominent. Ignores items that are both
@@ -138,17 +157,25 @@ const DragDropInner = React.memo(function DragDropInner(
     setDragging,
     isDragging,
     isNotDroppable,
+    dragType = 'copy',
+    dropType = 'add',
   } = props;
 
+  const isMoveDragging = isDragging && dragType === 'move';
+
   const classes = classNames(
     'lnsDragDrop',
-    className,
     {
+      'lnsDragDrop-isDraggable': draggable,
+      'lnsDragDrop-isDragging': isDragging,
+      'lnsDragDrop-isHidden': isMoveDragging,
+      'lnsDragDrop-isDroppable': !draggable,
       'lnsDragDrop-isDropTarget': droppable,
       'lnsDragDrop-isActiveDropTarget': droppable && state.isActive,
-      'lnsDragDrop-isDragging': isDragging,
-      'lnsDragDrop-isNotDroppable': isNotDroppable,
+      'lnsDragDrop-isNotDroppable': !isMoveDragging && isNotDroppable,
+      'lnsDragDrop-isReplacing': droppable && state.isActive && dropType === 'replace',
     },
+    className,
     state.dragEnterClassNames
   );
 
@@ -210,18 +237,14 @@ const DragDropInner = React.memo(function DragDropInner(
     }
   };
 
-  return (
-    <div
-      data-test-subj={props['data-test-subj'] || 'lnsDragDrop'}
-      className={classes}
-      onDragOver={dragOver}
-      onDragLeave={dragLeave}
-      onDrop={drop}
-      draggable={draggable}
-      onDragEnd={dragEnd}
-      onDragStart={dragStart}
-    >
-      {children}
-    </div>
-  );
+  return React.cloneElement(children, {
+    'data-test-subj': props['data-test-subj'] || 'lnsDragDrop',
+    className: classNames(children.props.className, classes),
+    onDragOver: dragOver,
+    onDragLeave: dragLeave,
+    onDrop: drop,
+    draggable,
+    onDragEnd: dragEnd,
+    onDragStart: dragStart,
+  });
 });
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.scss
index 1965b51f97034..a58b5c21e7724 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.scss
@@ -3,5 +3,5 @@
   // Remove EuiButton's default shadow to make button more subtle
   // sass-lint:disable-block no-important
   box-shadow: none !important;
-  border: 1px dashed currentColor;
+  border-color: $euiColorLightShade;
 }
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx
index ad16038f44911..6b7e5ba8ea89d 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx
@@ -121,6 +121,9 @@ function LayerPanels(
         <EuiFlexItem grow={true}>
           <EuiToolTip
             className="eui-fullWidth"
+            title={i18n.translate('xpack.lens.xyChart.addLayer', {
+              defaultMessage: 'Add a layer',
+            })}
             content={i18n.translate('xpack.lens.xyChart.addLayerTooltip', {
               defaultMessage:
                 'Use multiple layers to combine chart types or visualize different index patterns.',
@@ -135,9 +138,6 @@ function LayerPanels(
               aria-label={i18n.translate('xpack.lens.xyChart.addLayerButton', {
                 defaultMessage: 'Add layer',
               })}
-              title={i18n.translate('xpack.lens.xyChart.addLayerButton', {
-                defaultMessage: 'Add layer',
-              })}
               onClick={() => {
                 dispatch({
                   type: 'UPDATE_STATE',
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
index a415eb44cf196..19f4c0428260e 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
@@ -130,7 +130,7 @@ export function DimensionContainer({
 
   return (
     <>
-      <div className="lnsDimensionContainer__trigger">{trigger}</div>
+      {trigger}
       {flyout}
     </>
   );
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
index b85c3e843613d..c77db2e65ce2d 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
@@ -27,36 +27,41 @@
 
 .lnsLayerPanel__dimension {
   @include euiFontSizeS;
-  background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade);
   border-radius: $euiBorderRadius;
   display: flex;
   align-items: center;
   margin-top: $euiSizeXS;
   overflow: hidden;
-}
+  width: 100%;
+  min-height: $euiSizeXXL;
 
-.lnsLayerPanel__dimension-isHidden {
-  opacity: 0;
-}
+  // NativeRenderer is messing this up
+  > div {
+    flex-grow: 1;
+  }
 
-.lnsLayerPanel__dimension-isReplacing {
-  text-decoration: line-through;
+  &:focus,
+  &:focus-within {
+    @include euiFocusRing;
+  }
 }
 
 .lnsLayerPanel__triggerLink {
-  padding: $euiSizeS;
   width: 100%;
-  display: flex;
-  align-items: center;
-  min-height: $euiSizeXXL;
-}
+  padding: $euiSizeS;
+  min-height: $euiSizeXXL - 2;
 
-.lnsLayerPanel__anchor {
-  width: 100%;
+  &:focus {
+    background-color: transparent !important; // sass-lint:disable-line no-important
+    outline: none !important; // sass-lint:disable-line no-important
+  }
 }
 
-.lnsLayerPanel__dndGrab {
-  padding: $euiSizeS;
+.lnsLayerPanel__triggerLinkContent {
+  // Make EUI button content not centered
+  justify-content: flex-start;
+  padding: 0 !important; // sass-lint:disable-line no-important
+  color: $euiTextSubduedColor;
 }
 
 .lnsLayerPanel__styleEditor {
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
index 46cd0292f2459..ce2955da890d7 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -17,7 +17,6 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import classNames from 'classnames';
 import { NativeRenderer } from '../../../native_renderer';
 import { StateSetter, isDraggedOperation } from '../../../types';
 import { DragContext, DragDrop, ChildDragDropProvider } from '../../../drag_drop';
@@ -33,6 +32,28 @@ const initialDimensionContainerState = {
   addingToGroupId: null,
 };
 
+function isConfiguration(
+  value: unknown
+): value is { columnId: string; groupId: string; layerId: string } {
+  return (
+    value &&
+    typeof value === 'object' &&
+    'columnId' in value &&
+    'groupId' in value &&
+    'layerId' in value
+  );
+}
+
+function isSameConfiguration(config1: unknown, config2: unknown) {
+  return (
+    isConfiguration(config1) &&
+    isConfiguration(config2) &&
+    config1.columnId === config2.columnId &&
+    config1.groupId === config2.groupId &&
+    config1.layerId === config2.layerId
+  );
+}
+
 export function LayerPanel(
   props: Exclude<ConfigPanelWrapperProps, 'state' | 'setState'> & {
     layerId: string;
@@ -203,25 +224,22 @@ export function LayerPanel(
                   return (
                     <DragDrop
                       key={accessor}
-                      className={classNames('lnsLayerPanel__dimension', {
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
-                        'lnsLayerPanel__dimension-isHidden':
-                          isDraggedOperation(dragDropContext.dragging) &&
-                          accessor === dragDropContext.dragging.columnId,
-                      })}
-                      getAdditionalClassesOnEnter={() => {
-                        // If we are dragging another column, add an indication that the behavior will be a replacement'
-                        if (
-                          isDraggedOperation(dragDropContext.dragging) &&
-                          group.groupId !== dragDropContext.dragging.groupId
-                        ) {
-                          return 'lnsLayerPanel__dimension-isReplacing';
-                        }
-                        return '';
-                      }}
+                      dragType={
+                        isDraggedOperation(dragDropContext.dragging) &&
+                        accessor === dragDropContext.dragging.columnId
+                          ? 'move'
+                          : 'copy'
+                      }
+                      dropType={
+                        isDraggedOperation(dragDropContext.dragging) &&
+                        group.groupId !== dragDropContext.dragging.groupId
+                          ? 'replace'
+                          : 'add'
+                      }
                       data-test-subj={group.dataTestSubj}
                       draggable={!dimensionContainerState.isOpen}
                       value={{ columnId: accessor, groupId: group.groupId, layerId }}
+                      isValueEqual={isSameConfiguration}
                       label={group.groupLabel}
                       droppable={
                         Boolean(dragDropContext.dragging) &&
@@ -254,83 +272,84 @@ export function LayerPanel(
                         }
                       }}
                     >
-                      <DimensionContainer
-                        dimensionContainerState={dimensionContainerState}
-                        setDimensionContainerState={setDimensionContainerState}
-                        groups={groups}
-                        accessor={accessor}
-                        groupId={group.groupId}
-                        trigger={
-                          <NativeRenderer
-                            render={props.datasourceMap[datasourceId].renderDimensionTrigger}
-                            nativeProps={{
-                              ...layerDatasourceConfigProps,
-                              columnId: accessor,
-                              filterOperations: group.filterOperations,
-                              suggestedPriority: group.suggestedPriority,
-                              onClick: () => {
-                                if (dimensionContainerState.isOpen) {
-                                  setDimensionContainerState(initialDimensionContainerState);
-                                } else {
-                                  setDimensionContainerState({
-                                    isOpen: true,
-                                    openId: accessor,
-                                    addingToGroupId: null, // not set for existing dimension
-                                  });
-                                }
-                              },
-                            }}
-                          />
-                        }
-                        panel={
-                          <>
-                            {datasourceDimensionEditor}
-                            {visDimensionEditor}
-                          </>
-                        }
-                        panelTitle={i18n.translate('xpack.lens.configure.configurePanelTitle', {
-                          defaultMessage: '{groupLabel} configuration',
-                          values: {
-                            groupLabel: group.groupLabel,
-                          },
-                        })}
-                      />
+                      <div className="lnsLayerPanel__dimension">
+                        <DimensionContainer
+                          dimensionContainerState={dimensionContainerState}
+                          setDimensionContainerState={setDimensionContainerState}
+                          groups={groups}
+                          accessor={accessor}
+                          groupId={group.groupId}
+                          trigger={
+                            <NativeRenderer
+                              render={props.datasourceMap[datasourceId].renderDimensionTrigger}
+                              nativeProps={{
+                                ...layerDatasourceConfigProps,
+                                columnId: accessor,
+                                filterOperations: group.filterOperations,
+                                suggestedPriority: group.suggestedPriority,
+                                onClick: () => {
+                                  if (dimensionContainerState.isOpen) {
+                                    setDimensionContainerState(initialDimensionContainerState);
+                                  } else {
+                                    setDimensionContainerState({
+                                      isOpen: true,
+                                      openId: accessor,
+                                      addingToGroupId: null, // not set for existing dimension
+                                    });
+                                  }
+                                },
+                              }}
+                            />
+                          }
+                          panel={
+                            <>
+                              {datasourceDimensionEditor}
+                              {visDimensionEditor}
+                            </>
+                          }
+                          panelTitle={i18n.translate('xpack.lens.configure.configurePanelTitle', {
+                            defaultMessage: '{groupLabel} configuration',
+                            values: {
+                              groupLabel: group.groupLabel,
+                            },
+                          })}
+                        />
 
-                      <EuiButtonIcon
-                        data-test-subj="indexPattern-dimension-remove"
-                        iconType="cross"
-                        iconSize="s"
-                        size="s"
-                        color="danger"
-                        aria-label={i18n.translate('xpack.lens.indexPattern.removeColumnLabel', {
-                          defaultMessage: 'Remove configuration',
-                        })}
-                        title={i18n.translate('xpack.lens.indexPattern.removeColumnLabel', {
-                          defaultMessage: 'Remove configuration',
-                        })}
-                        onClick={() => {
-                          trackUiEvent('indexpattern_dimension_removed');
-                          props.updateAll(
-                            datasourceId,
-                            layerDatasource.removeColumn({
-                              layerId,
-                              columnId: accessor,
-                              prevState: layerDatasourceState,
-                            }),
-                            activeVisualization.removeDimension({
-                              layerId,
-                              columnId: accessor,
-                              prevState: props.visualizationState,
-                            })
-                          );
-                        }}
-                      />
+                        <EuiButtonIcon
+                          data-test-subj="indexPattern-dimension-remove"
+                          iconType="cross"
+                          iconSize="s"
+                          size="s"
+                          color="danger"
+                          aria-label={i18n.translate('xpack.lens.indexPattern.removeColumnLabel', {
+                            defaultMessage: 'Remove configuration',
+                          })}
+                          title={i18n.translate('xpack.lens.indexPattern.removeColumnLabel', {
+                            defaultMessage: 'Remove configuration',
+                          })}
+                          onClick={() => {
+                            trackUiEvent('indexpattern_dimension_removed');
+                            props.updateAll(
+                              datasourceId,
+                              layerDatasource.removeColumn({
+                                layerId,
+                                columnId: accessor,
+                                prevState: layerDatasourceState,
+                              }),
+                              activeVisualization.removeDimension({
+                                layerId,
+                                columnId: accessor,
+                                prevState: props.visualizationState,
+                              })
+                            );
+                          }}
+                        />
+                      </div>
                     </DragDrop>
                   );
                 })}
                 {group.supportsMoreColumns ? (
                   <DragDrop
-                    className="lnsLayerPanel__dimension"
                     data-test-subj={group.dataTestSubj}
                     droppable={
                       Boolean(dragDropContext.dragging) &&
@@ -374,23 +393,23 @@ export function LayerPanel(
                       }
                     }}
                   >
-                    <DimensionContainer
-                      dimensionContainerState={dimensionContainerState}
-                      setDimensionContainerState={setDimensionContainerState}
-                      groups={groups}
-                      accessor={newId}
-                      groupId={group.groupId}
-                      trigger={
-                        <div className="lnsLayerPanel__triggerLink">
+                    <div className="lnsLayerPanel__dimension">
+                      <DimensionContainer
+                        dimensionContainerState={dimensionContainerState}
+                        setDimensionContainerState={setDimensionContainerState}
+                        groups={groups}
+                        accessor={newId}
+                        groupId={group.groupId}
+                        trigger={
                           <EuiButtonEmpty
+                            className="lnsLayerPanel__triggerLink"
+                            color="text"
+                            size="xs"
                             iconType="plusInCircleFilled"
+                            contentProps={{
+                              className: 'lnsLayerPanel__triggerLinkContent',
+                            }}
                             data-test-subj="lns-empty-dimension"
-                            aria-label={i18n.translate('xpack.lens.configure.addConfig', {
-                              defaultMessage: 'Add a configuration',
-                            })}
-                            title={i18n.translate('xpack.lens.configure.addConfig', {
-                              defaultMessage: 'Add a configuration',
-                            })}
                             onClick={() => {
                               if (dimensionContainerState.isOpen) {
                                 setDimensionContainerState(initialDimensionContainerState);
@@ -402,52 +421,51 @@ export function LayerPanel(
                                 });
                               }
                             }}
-                            size="xs"
                           >
                             <FormattedMessage
                               id="xpack.lens.configure.emptyConfig"
-                              defaultMessage="Drop a field here"
+                              defaultMessage="Drop a field or click to add"
                             />
                           </EuiButtonEmpty>
-                        </div>
-                      }
-                      panelTitle={i18n.translate('xpack.lens.configure.configurePanelTitle', {
-                        defaultMessage: '{groupLabel} configuration',
-                        values: {
-                          groupLabel: group.groupLabel,
-                        },
-                      })}
-                      panel={
-                        <NativeRenderer
-                          render={props.datasourceMap[datasourceId].renderDimensionEditor}
-                          nativeProps={{
-                            ...layerDatasourceConfigProps,
-                            core: props.core,
-                            columnId: newId,
-                            filterOperations: group.filterOperations,
-                            suggestedPriority: group.suggestedPriority,
+                        }
+                        panelTitle={i18n.translate('xpack.lens.configure.configurePanelTitle', {
+                          defaultMessage: '{groupLabel} configuration',
+                          values: {
+                            groupLabel: group.groupLabel,
+                          },
+                        })}
+                        panel={
+                          <NativeRenderer
+                            render={props.datasourceMap[datasourceId].renderDimensionEditor}
+                            nativeProps={{
+                              ...layerDatasourceConfigProps,
+                              core: props.core,
+                              columnId: newId,
+                              filterOperations: group.filterOperations,
+                              suggestedPriority: group.suggestedPriority,
 
-                            setState: (newState: unknown) => {
-                              props.updateAll(
-                                datasourceId,
-                                newState,
-                                activeVisualization.setDimension({
-                                  layerId,
-                                  groupId: group.groupId,
-                                  columnId: newId,
-                                  prevState: props.visualizationState,
-                                })
-                              );
-                              setDimensionContainerState({
-                                isOpen: true,
-                                openId: newId,
-                                addingToGroupId: null, // clear now that dimension exists
-                              });
-                            },
-                          }}
-                        />
-                      }
-                    />
+                              setState: (newState: unknown) => {
+                                props.updateAll(
+                                  datasourceId,
+                                  newState,
+                                  activeVisualization.setDimension({
+                                    layerId,
+                                    groupId: group.groupId,
+                                    columnId: newId,
+                                    prevState: props.visualizationState,
+                                  })
+                                );
+                                setDimensionContainerState({
+                                  isOpen: true,
+                                  openId: newId,
+                                  addingToGroupId: null, // clear now that dimension exists
+                                });
+                              },
+                            }}
+                          />
+                        }
+                      />
+                    </div>
                   </DragDrop>
                 ) : null}
               </>
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss
index bad0563f16f1f..ac52190dc7b0d 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss
@@ -20,7 +20,7 @@
 .lnsFrameLayout__pageBody {
   @include euiScrollBar;
   min-width: $lnsPanelMinWidth + $euiSizeXL;
-  overflow: hidden;
+  overflow: hidden auto;
   // Leave out bottom padding so the suggestions scrollbar stays flush to window edge
   // Leave out left padding so the left sidebar's focus states are visible outside of content bounds
   // This also means needing to add same amount of margin to page content and suggestion items
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
index e56e55fdd5d6c..2a5798ac6a70c 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
@@ -221,7 +221,7 @@ export function InnerWorkspacePanel({
             )}
           </strong>
         </h2>
-        <DropIllustration className="lnsWorkspacePanel__dropIllustration" />
+        <DropIllustration aria-hidden={true} className="lnsWorkspacePanel__dropIllustration" />
         {expression === null && (
           <>
             <p>
@@ -257,7 +257,7 @@ export function InnerWorkspacePanel({
 
     if (localState.expressionBuildError) {
       return (
-        <EuiFlexGroup direction="column" alignItems="center">
+        <EuiFlexGroup style={{ maxWidth: '100%' }} direction="column" alignItems="center">
           <EuiFlexItem>
             <EuiIcon type="alert" size="xl" color="danger" />
           </EuiFlexItem>
@@ -283,7 +283,7 @@ export function InnerWorkspacePanel({
           onEvent={onEvent}
           renderError={(errorMessage?: string | null) => {
             return (
-              <EuiFlexGroup direction="column" alignItems="center">
+              <EuiFlexGroup style={{ maxWidth: '100%' }} direction="column" alignItems="center">
                 <EuiFlexItem>
                   <EuiIcon type="alert" size="xl" color="danger" />
                 </EuiFlexItem>
@@ -338,8 +338,10 @@ export function InnerWorkspacePanel({
         droppable={Boolean(suggestionForDraggedField)}
         onDrop={onDrop}
       >
-        {renderVisualization()}
-        {Boolean(suggestionForDraggedField) && expression !== null && renderEmptyWorkspace()}
+        <div>
+          {renderVisualization()}
+          {Boolean(suggestionForDraggedField) && expression !== null && renderEmptyWorkspace()}
+        </div>
       </DragDrop>
     </WorkspacePanelWrapper>
   );
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
index 7f7385f029ed4..33b9b2fe1dbf0 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
@@ -1,3 +1,5 @@
+@import '../../../mixins';
+
 .lnsWorkspacePanelWrapper {
   @include euiScrollBar;
   overflow: hidden;
@@ -7,6 +9,7 @@
   display: flex;
   flex-direction: column;
   position: relative; // For positioning the dnd overlay
+  min-height: $euiSizeXXL * 10;
 
   .lnsWorkspacePanelWrapper__pageContentHeader {
     @include euiTitle('xs');
@@ -25,7 +28,7 @@
     display: flex;
     align-items: stretch;
     justify-content: stretch;
-    overflow: hidden;
+    overflow: auto;
 
     > * {
       flex: 1 1 100%;
@@ -41,6 +44,7 @@
   // Disable the coloring of the DnD for this element as we'll
   // Color the whole panel instead
   background-color: transparent !important; // sass-lint:disable-line no-important
+  border: none !important; // sass-lint:disable-line no-important
 }
 
 .lnsExpressionRenderer {
@@ -60,28 +64,25 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  transition: background-color $euiAnimSpeedNormal ease-in-out;
+  transition: background-color $euiAnimSpeedFast ease-in-out;
 
   .lnsDragDrop-isDropTarget & {
-    background-color: transparentize($euiColorSecondary, .9);
+    @include lnsDroppable;
+    @include lnsDroppableActive;
 
     p {
-      transition: filter $euiAnimSpeedNormal ease-in-out;
+      transition: filter $euiAnimSpeedFast ease-in-out;
       filter: blur(5px);
     }
   }
 
   .lnsDragDrop-isActiveDropTarget & {
-    background-color: transparentize($euiColorSecondary, .75);
+    @include lnsDroppableActiveHover;
 
     .lnsDropIllustration__hand {
-      animation: pulseArrowContinuous 1.5s ease-in-out 0s infinite normal forwards;
+      animation: lnsWorkspacePanel__illustrationPulseContinuous 1.5s ease-in-out 0s infinite normal forwards;
     }
   }
-
-  &.lnsWorkspacePanel__emptyContent-onTop p {
-    display: none;
-  }
 }
 
 .lnsWorkspacePanelWrapper__toolbar {
@@ -106,10 +107,10 @@
 }
 
 .lnsDropIllustration__hand {
-  animation: pulseArrow 5s ease-in-out 0s infinite normal forwards;
+  animation: lnsWorkspacePanel__illustrationPulseArrow 5s ease-in-out 0s infinite normal forwards;
 }
 
-@keyframes pulseArrow {
+@keyframes lnsWorkspacePanel__illustrationPulseArrow {
   0% { transform: translateY(0%); }
   65% { transform: translateY(0%); }
   72% { transform: translateY(10%); }
@@ -118,7 +119,7 @@
   95% { transform: translateY(0); }
 }
 
-@keyframes pulseArrowContinuous {
+@keyframes lnsWorkspacePanel__illustrationPulseContinuous {
   0% { transform: translateY(10%); }
   25% { transform: translateY(15%); }
   50% { transform: translateY(10%); }
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss
index 155b954e9cf17..df73789eadedf 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss
@@ -12,7 +12,7 @@
 
 .lnsInnerIndexPatternDataPanel__fieldItems {
   // Quick fix for making sure the shadow and focus rings are visible outside the accordion bounds
-  padding: $euiSizeXS $euiSizeXS 0;
+  padding: $euiSizeXS;
 }
 
 .lnsInnerIndexPatternDataPanel__textField {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx
index 6f0a9c2a86acd..12b8d91c35ade 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx
@@ -250,6 +250,10 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens
     return null;
   }
 
+  const triggerLinkA11yText = i18n.translate('xpack.lens.configure.editConfig', {
+    defaultMessage: 'Click to edit configuration or drag to move',
+  });
+
   if (currentFieldIsInvalid) {
     return (
       <EuiToolTip
@@ -264,7 +268,7 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens
             })}
           </p>
         }
-        anchorClassName="lnsLayerPanel__anchor"
+        anchorClassName="eui-displayBlock"
       >
         <EuiLink
           color="danger"
@@ -272,12 +276,8 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens
           className="lnsLayerPanel__triggerLink"
           onClick={props.onClick}
           data-test-subj="lns-dimensionTrigger"
-          aria-label={i18n.translate('xpack.lens.configure.editConfig', {
-            defaultMessage: 'Edit configuration',
-          })}
-          title={i18n.translate('xpack.lens.configure.editConfig', {
-            defaultMessage: 'Edit configuration',
-          })}
+          aria-label={triggerLinkA11yText}
+          title={triggerLinkA11yText}
         >
           <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
             <EuiFlexItem grow={false}>
@@ -296,12 +296,8 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens
       className="lnsLayerPanel__triggerLink"
       onClick={props.onClick}
       data-test-subj="lns-dimensionTrigger"
-      aria-label={i18n.translate('xpack.lens.configure.editConfig', {
-        defaultMessage: 'Edit configuration',
-      })}
-      title={i18n.translate('xpack.lens.configure.editConfig', {
-        defaultMessage: 'Edit configuration',
-      })}
+      aria-label={triggerLinkA11yText}
+      title={triggerLinkA11yText}
     >
       {uniqueLabel}
     </EuiLink>
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss
index d74c332dd42e5..1b55d9623e223 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss
@@ -1,25 +1,25 @@
-.lnsFieldItem--missing {
-  .lnsFieldItem__info {
-    background: lightOrDarkTheme(transparentize($euiColorMediumShade, .9), $euiColorEmptyShade);
-    color: $euiColorDarkShade;
-  }
-}
-
-.lnsFieldItem__info {
+.lnsFieldItem {
   .lnsFieldItem__infoIcon {
     visibility: hidden;
+    opacity: 0;
   }
 
-  &:hover,
-  &:focus {
+  &:hover:not([class*='isActive']) {
     cursor: grab;
 
     .lnsFieldItem__infoIcon {
       visibility: visible;
+      opacity: 1;
+      transition: opacity $euiAnimSpeedFast ease-in-out 1s;
     }
   }
 }
 
+.lnsFieldItem--missing {
+  background: lightOrDarkTheme(transparentize($euiColorMediumShade, .9), $euiColorEmptyShade);
+  color: $euiColorDarkShade;
+}
+
 .lnsFieldItem__topValue {
   margin-bottom: $euiSizeS;
 
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
index 7377d15bca6d7..2fbe23f9085f2 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
@@ -33,6 +33,7 @@ import {
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import { DataPublicPluginStart } from 'src/plugins/data/public';
+import { EuiHighlight } from '@elastic/eui';
 import {
   Query,
   KBN_FIELD_TYPES,
@@ -102,22 +103,6 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) {
     isLoading: false,
   });
 
-  const wrappableName = wrapOnDot(field.displayName)!;
-  const wrappableHighlight = wrapOnDot(highlight);
-  const highlightIndex = wrappableHighlight
-    ? wrappableName.toLowerCase().indexOf(wrappableHighlight.toLowerCase())
-    : -1;
-  const wrappableHighlightableFieldName =
-    highlightIndex < 0 ? (
-      wrappableName
-    ) : (
-      <span>
-        <span>{wrappableName.substr(0, highlightIndex)}</span>
-        <strong>{wrappableName.substr(highlightIndex, wrappableHighlight.length)}</strong>
-        <span>{wrappableName.substr(highlightIndex + wrappableHighlight.length)}</span>
-      </span>
-    );
-
   function fetchData() {
     if (state.isLoading) {
       return;
@@ -200,22 +185,20 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) {
       ownFocus
       className="lnsFieldItem__popoverAnchor"
       display="block"
+      data-test-subj="lnsFieldListPanelField"
       container={document.querySelector<HTMLElement>('.application') || undefined}
       button={
         <DragDrop
           label={field.displayName}
           value={value}
-          data-test-subj="lnsFieldListPanelField"
+          data-test-subj={`lnsFieldListPanelField-${field.name}`}
           draggable
-          className={`lnsFieldItem lnsFieldItem--${field.type} lnsFieldItem--${
-            exists ? 'exists' : 'missing'
-          }`}
         >
           <FieldButton
-            className="lnsFieldItem__info"
-            isDraggable
+            className={`lnsFieldItem lnsFieldItem--${field.type} lnsFieldItem--${
+              exists ? 'exists' : 'missing'
+            }`}
             isActive={infoIsOpen}
-            data-test-subj={`lnsFieldListPanelField-${field.name}`}
             onClick={togglePopover}
             aria-label={i18n.translate('xpack.lens.indexPattern.fieldStatsButtonAriaLabel', {
               defaultMessage: '{fieldName}: {fieldType}. Hit enter for a field preview.',
@@ -225,7 +208,11 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) {
               },
             })}
             fieldIcon={lensFieldIcon}
-            fieldName={wrappableHighlightableFieldName}
+            fieldName={
+              <EuiHighlight search={wrapOnDot(highlight)}>
+                {wrapOnDot(field.displayName)}
+              </EuiHighlight>
+            }
             fieldInfoIcon={lensInfoIcon}
           />
         </DragDrop>
@@ -527,7 +514,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
               </EuiFlexItem>
 
               <EuiFlexItem grow={false} className="eui-textTruncate">
-                <EuiText size="s" color="subdued">
+                <EuiText size="xs" color="subdued">
                   {Math.round((otherCount / props.sampledValues!) * 100)}%
                 </EuiText>
               </EuiFlexItem>
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/buckets.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/buckets.tsx
index 47380f7865578..50471ca84c0d8 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/buckets.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/buckets.tsx
@@ -96,7 +96,13 @@ export const DraggableBucketContainer = ({
   children: React.ReactNode;
 } & BucketContainerProps) => {
   return (
-    <EuiDraggable spacing="m" index={idx} draggableId={id} disableInteractiveElementBlocking>
+    <EuiDraggable
+      style={{ marginBottom: 4 }}
+      spacing="none"
+      index={idx}
+      draggableId={id}
+      disableInteractiveElementBlocking
+    >
       {(provided) => <BucketContainer {...bucketContainerProps}>{children}</BucketContainer>}
     </EuiDraggable>
   );
@@ -134,7 +140,7 @@ export const DragDropBuckets = ({
   };
   return (
     <EuiDragDropContext onDragEnd={handleDragEnd} onDragStart={onDragStart}>
-      <EuiDroppable droppableId={droppableId} spacing="s">
+      <EuiDroppable droppableId={droppableId} spacing="none">
         {children}
       </EuiDroppable>
     </EuiDragDropContext>
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 3f673f80afa28..6eca8c1671f22 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -9472,7 +9472,6 @@
     "xpack.lens.configPanel.color.tooltip.custom": "［自動］モードに戻すには、カスタム色をオフにしてください。",
     "xpack.lens.configPanel.color.tooltip.disabled": "レイヤーに「内訳条件」が含まれている場合は、個別の系列をカスタム色にできません。",
     "xpack.lens.configPanel.selectVisualization": "ビジュアライゼーションを選択してください",
-    "xpack.lens.configure.addConfig": "構成を追加",
     "xpack.lens.configure.editConfig": "構成の編集",
     "xpack.lens.configure.emptyConfig": "ここにフィールドをドロップ",
     "xpack.lens.dataPanelWrapper.switchDatasource": "データソースに切り替える",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 377e202389498..b7ab40cc115ec 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -9478,7 +9478,6 @@
     "xpack.lens.configPanel.color.tooltip.custom": "清除定制颜色以返回到“自动”模式。",
     "xpack.lens.configPanel.color.tooltip.disabled": "当图层包括“细分依据”，各个系列无法定制颜色。",
     "xpack.lens.configPanel.selectVisualization": "选择可视化",
-    "xpack.lens.configure.addConfig": "添加配置",
     "xpack.lens.configure.editConfig": "编辑配置",
     "xpack.lens.configure.emptyConfig": "将字段拖放到此处",
     "xpack.lens.dataPanelWrapper.switchDatasource": "切换到数据源",