fix alignment issues with MultiColumnField in Traffic Splitting modal

openshift · Apr 29, 2020 · fab0bdb · fab0bdb
1 parent 57b271b
commit fab0bdb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/frontend/packages/knative-plugin/src/components/traffic-splitting/TrafficSplittingModal.scss b/frontend/packages/knative-plugin/src/components/traffic-splitting/TrafficSplittingModal.scss
@@ -0,0 +1,6 @@
+.odc-traffic-splitting-modal {
+  .odc-multi-column-field__col {
+    flex: auto;
+    width: 30%;
+  }
+}
diff --git a/frontend/packages/knative-plugin/src/components/traffic-splitting/TrafficSplittingModal.tsx b/frontend/packages/knative-plugin/src/components/traffic-splitting/TrafficSplittingModal.tsx
@@ -7,6 +7,7 @@ import {
 } from '@console/internal/components/factory/modal';
 import { TextInputTypes } from '@patternfly/react-core';
 import { MultiColumnField, InputField, DropdownField } from '@console/shared';
+import './TrafficSplittingModal.scss';
 
 export interface TrafficSplittingModalProps {
   revisionItems: any;
@@ -23,7 +24,7 @@ const TrafficSplittingModal: React.FC<Props> = ({
   values,
 }) => {
   return (
-    <form className="modal-content" onSubmit={handleSubmit}>
+    <form className="modal-content odc-traffic-splitting-modal" onSubmit={handleSubmit}>
       <ModalTitle>Set Traffic Distribution</ModalTitle>
       <ModalBody>
         <p>Set traffic distribution for the Revisions of the Knative Service</p>