Limit width on flyout

elastic · Jul 17, 2023 · a2f4d21 · a2f4d21
1 parent 6a90379
commit a2f4d21
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/src/plugins/navigation_embeddable/public/components/navigation_embeddable.scss b/src/plugins/navigation_embeddable/public/components/navigation_embeddable.scss
@@ -1,23 +1,25 @@
 @import '../mixins';
 
-.navEmbeddableLinkEditor {
-  @include euiFlyout;
+.navEmbeddablePanelEditor {
+  max-inline-size: $euiSizeXXL * 18; // 40px * 18 = 720px
 
-  &.in {
-    animation: euiFlyoutOpenAnimation $euiAnimSpeedNormal $euiAnimSlightResistance;
-  }
 
-  &.out {
-    animation: euiFlyoutCloseAnimation $euiAnimSpeedNormal $euiAnimSlightResistance;
-  }
+  .navEmbeddableLinkEditor {
+    @include euiFlyout;
+    max-inline-size: $euiSizeXXL * 18;
 
-  .linkEditorBackButton {
-    height: auto;
-  }
-}
+    &.in {
+      animation: euiFlyoutOpenAnimation $euiAnimSpeedNormal $euiAnimSlightResistance;
+    }
 
-.secondaryFlyout {
-  background-color: none;
+    &.out {
+      animation: euiFlyoutCloseAnimation $euiAnimSpeedNormal $euiAnimSlightResistance;
+    }
+
+    .linkEditorBackButton {
+      height: auto;
+    }
+  }
 }
 
 .navEmbeddableDashboardItem {

diff --git a/src/plugins/navigation_embeddable/public/editor/open_editor_flyout.tsx b/src/plugins/navigation_embeddable/public/editor/open_editor_flyout.tsx
@@ -74,6 +74,7 @@ export async function openEditorFlyout(
         ownFocus: true,
         outsideClickCloses: false,
         onClose: onCancel,
+        className: 'navEmbeddablePanelEditor',
       }
     );