Move flyout width styling to scss files

caraml-dev · Sep 12, 2022 · 6431813 · 6431813
1 parent 740e467
commit 6431813
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/ui/src/experiments/list/search/SearchExperimentsPanel.js b/ui/src/experiments/list/search/SearchExperimentsPanel.js
@@ -6,14 +6,15 @@ import { SegmenterContextProvider } from "providers/segmenters/context";
 
 import SearchExperimentsFilters from "./SearchExperimentsFilters";
 
+import "./SearchExperimentsPanel.scss";
+
 const SearchExperimentsPanel = ({ onChange, onClose, projectId }) => {
   return (
     <SegmenterContextProvider projectId={projectId}>
       <EuiFlyout
         id="experiments-search-panel"
         side="left"
         onClose={onClose}
-        size="313px"
         maxWidth={true}
         hideCloseButton={true}
         paddingSize="m"

diff --git a/ui/src/experiments/list/search/SearchExperimentsPanel.scss b/ui/src/experiments/list/search/SearchExperimentsPanel.scss
@@ -0,0 +1,6 @@
+// Required for setting a specific flyout width that is smaller than the default EUI flyout width (medium); overwrites
+// the min-width that corresponds to the default EUI flyout width
+.euiFlyout--medium {
+  width: 313px;
+  min-width: unset;
+}
diff --git a/ui/src/settings/components/playground_flyout/PlaygroundFlyout.js b/ui/src/settings/components/playground_flyout/PlaygroundFlyout.js
@@ -21,6 +21,8 @@ import schema from "settings/components/form/validation/schema";
 import { PlaygroundRadioGroup } from "settings/components/playground_flyout/PlaygroundRadioGroup";
 import { getValidationOptions } from "settings/components/playground_flyout/typeOptions";
 
+import "./PlaygroundFlyout.scss";
+
 var JSONbig = require("json-bigint");
 
 const PlaygroundFlyout = ({ onClose }) => {
@@ -75,7 +77,6 @@ const PlaygroundFlyout = ({ onClose }) => {
   return (
     <EuiFlyout
       onClose={onClose}
-      size="313px"
       maxWidth={true}
       paddingSize="m"
       type="push"

diff --git a/ui/src/settings/components/playground_flyout/PlaygroundFlyout.scss b/ui/src/settings/components/playground_flyout/PlaygroundFlyout.scss
@@ -0,0 +1,6 @@
+// Required for setting a specific flyout width that is smaller than the default EUI flyout width (medium); overwrites
+// the min-width that corresponds to the default EUI flyout width
+.euiFlyout--medium {
+  width: 313px;
+  min-width: unset;
+}