fix overflowing content

elastic · Feb 19, 2021 · bf1cc6b · bf1cc6b
1 parent 0b40493
commit bf1cc6b
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 39 deletions.
diff --git 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/...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/...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}
       >
-        <div>
+        <EuiPageContentBody className="lnsWorkspacePanelWrapper__pageContentBody">
           {renderVisualization()}
           {Boolean(suggestionForDraggedField) && expression !== null && renderEmptyWorkspace()}
-        </div>
+        </EuiPageContentBody>
       </DragDrop>
     </WorkspacePanelWrapper>
   );

diff --git a/...ens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss b/...ens/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,44 +30,28 @@
 }
 
 .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: 1px solid $euiColorLightShade;
+  border-radius: 4px;
 
-  .lnsDragDrop-isDropTarget & {
+  &.lnsDragDrop-isDropTarget {
     @include lnsDroppable;
     @include lnsDroppableActive;
 
     p {
       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/...lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/...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({
               })}
           </h1>
         </EuiScreenReaderOnly>
-        <EuiPageContentBody className="lnsWorkspacePanelWrapper__pageContentBody">
-          {children}
-        </EuiPageContentBody>
+        {children}
       </EuiPageContent>
     </>
   );