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 f029c776e8452a..9e3f1e1c3cf264 100644
--- a/x-pack/plugins/lens/public/drag_drop/drag_drop.scss
+++ b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss
@@ -84,6 +84,8 @@
.lnsDragDrop__container {
position: relative;
overflow: visible !important; // sass-lint:disable-line no-important
+ width: 100%;
+ height: 100%;
}
.lnsDragDrop__reorderableDrop {
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 64f89a60abeeb6..d5c0b9ff64807f 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
@@ -10,7 +10,15 @@ import classNames from 'classnames';
import { FormattedMessage } from '@kbn/i18n/react';
import { Ast } from '@kbn/interpreter/common';
import { i18n } from '@kbn/i18n';
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiButtonEmpty, EuiLink } from '@elastic/eui';
+import {
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiIcon,
+ EuiText,
+ EuiButtonEmpty,
+ EuiLink,
+ EuiPageContentBody,
+} from '@elastic/eui';
import { CoreStart, CoreSetup } from 'kibana/public';
import {
DataPublicPluginStart,
@@ -320,10 +328,10 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
value={dropProps.value}
order={dropProps.order}
>
-
+
{renderVisualization()}
{Boolean(suggestionForDraggedField) && expression !== null && renderEmptyWorkspace()}
-
+
);
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 0ace88b3d3ab75..3949c7deb53b4a 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
@@ -10,6 +10,7 @@
position: relative; // For positioning the dnd overlay
min-height: $euiSizeXXL * 10;
overflow: visible;
+ border: none;
.lnsWorkspacePanelWrapper__pageContentBody {
@include euiScrollBar;
@@ -29,34 +30,12 @@
}
.lnsWorkspacePanel__dragDrop {
- // 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
width: 100%;
height: 100%;
-}
-
-.lnsExpressionRenderer {
- .lnsDragDrop-isDropTarget & {
- transition: filter $euiAnimSpeedNormal ease-in-out, opacity $euiAnimSpeedNormal ease-in-out;
- filter: blur($euiSizeXS);
- opacity: .25;
- }
-}
-
-.lnsWorkspacePanel__emptyContent {
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- top: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- transition: background-color $euiAnimSpeedFast ease-in-out;
+ border: $euiBorderThin;
+ border-radius: $euiBorderRadius;
- .lnsDragDrop-isDropTarget & {
+ &.lnsDragDrop-isDropTarget {
@include lnsDroppable;
@include lnsDroppableActive;
@@ -64,9 +43,15 @@
transition: filter $euiAnimSpeedFast ease-in-out;
filter: blur(5px);
}
+
+ .lnsExpressionRenderer {
+ transition: filter $euiAnimSpeedNormal ease-in-out, opacity $euiAnimSpeedNormal ease-in-out;
+ filter: blur($euiSizeXS);
+ opacity: .25;
+ }
}
- .lnsDragDrop-isActiveDropTarget & {
+ &.lnsDragDrop-isActiveDropTarget {
@include lnsDroppableActiveHover;
.lnsDropIllustration__hand {
@@ -75,6 +60,18 @@
}
}
+.lnsWorkspacePanel__emptyContent {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: background-color $euiAnimSpeedFast ease-in-out;
+}
+
.lnsWorkspacePanelWrapper__toolbar {
margin-bottom: 0;
}
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
index 081f3bf5722e27..85f7601d8fb292 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
@@ -9,13 +9,7 @@ import './workspace_panel_wrapper.scss';
import React, { useCallback } from 'react';
import { i18n } from '@kbn/i18n';
-import {
- EuiPageContent,
- EuiPageContentBody,
- EuiFlexGroup,
- EuiFlexItem,
- EuiScreenReaderOnly,
-} from '@elastic/eui';
+import { EuiPageContent, EuiFlexGroup, EuiFlexItem, EuiScreenReaderOnly } from '@elastic/eui';
import { Datasource, FramePublicAPI, Visualization } from '../../../types';
import { NativeRenderer } from '../../../native_renderer';
import { Action } from '../state_management';
@@ -130,9 +124,7 @@ export function WorkspacePanelWrapper({
})}
-
- {children}
-
+ {children}
>
);