[Lens] Refactor Flyout Design Updates (#14)

* allow flyout to go full width on small viewports * remove hiding of layer panel when flyout open
elastic · Dec 3, 2021 · 78fb97b · 78fb97b
1 parent 2b37a0f
commit 78fb97b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 15 deletions.
diff --git a/...ugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss b/...ugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss
@@ -5,19 +5,15 @@
   // Use the EuiFlyout style
   @include euiFlyout;
   // But with custom positioning to keep it within the sidebar contents
-  position: absolute;
-  left: 0;
   animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance;
+  left: 0;
+  max-width: none !important;
+  z-index: $euiZContentMenu;
 
   @include euiBreakpoint('l', 'xl') {
-    top: 0 !important;
     height: 100% !important;
-  }
-
-  @include euiBreakpoint('xs', 's', 'm') {
-    @include euiFlyout;
-    left: 10vw;
-    z-index: $euiZContentMenu;
+    position: absolute;
+    top: 0 !important;
   }
 
   .lnsFrameLayout__sidebar-isFullscreen & {

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
@@ -317,12 +317,7 @@ export function LayerPanel(
 
   return (
     <>
-      <section
-        tabIndex={-1}
-        ref={registerLayerRef}
-        className="lnsLayerPanel"
-        style={{ visibility: isDimensionPanelOpen ? 'hidden' : 'visible' }}
-      >
+      <section tabIndex={-1} ref={registerLayerRef} className="lnsLayerPanel">
         <EuiPanel data-test-subj={`lns-layerPanel-${layerIndex}`} paddingSize="none">
           <header className="lnsLayerPanel__layerHeader">
             <EuiFlexGroup gutterSize="s" responsive={false} alignItems="center">