fix: revert to static width of modal (#955)

fix: revert to static width of modal
splunk · Nov 20, 2023 · aec869f · aec869f
1 parent 0f393fe
commit aec869f
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 24 deletions.
diff --git a/ui/src/components/ControlWrapper.tsx b/ui/src/components/ControlWrapper.tsx
@@ -5,32 +5,11 @@ import styled from 'styled-components';
 import MarkdownMessage from './MarkdownMessage';
 import CONTROL_TYPE_MAP, { ComponentTypes } from '../constants/ControlTypeMap';
 
-const CustomElement = styled.div`
-    padding-left: 10px;
-`;
+const CustomElement = styled.div``;
 
-/* 
-    1st child is title, 3rd is help message
-    their width is fixed to not increase size of modal 
-    or page unintentionally due to long text
- */
 const ControlGroupWrapper = styled(ControlGroup).attrs((props: { dataName: string }) => ({
     'data-name': props.dataName,
 }))`
-    width: 100%;
-    max-width: 100%;
-    padding: 0 30px;
-
-    > * {
-        &:first-child {
-            width: 240px !important;
-        }
-        &:nth-child(3) {
-            margin-left: 250px !important;
-            width: 320px;
-        }
-    }
-
     span[class*='ControlGroupStyles__StyledAsterisk-'] {
         color: red;
     }
@@ -163,6 +142,7 @@ class ControlWrapper extends React.PureComponent<ControlWrapperProps> {
                     // @ts-ignore property should be data-name, but is mapped in obj ControlGroupWrapper
                     dataName={field}
                     required={required}
+                    labelWidth={240}
                 >
                     <CustomElement>{rowView}</CustomElement>
                 </ControlGroupWrapper>

diff --git a/ui/src/components/EntityModal.tsx b/ui/src/components/EntityModal.tsx
@@ -9,7 +9,7 @@ import { StyledButton } from '../pages/EntryPageStyle';
 import BaseFormView from './BaseFormView';
 
 const ModalWrapper = styled(Modal)`
-    width: fit-content;
+    width: 800px;
 `;
 
 interface EntityModalProps {

diff --git a/ui/src/components/EntityPage.tsx b/ui/src/components/EntityPage.tsx
@@ -83,7 +83,7 @@ function EntityPage({
             </ColumnLayout.Row>
             <ColumnLayout.Row>
                 <ColumnLayout.Column span={2} />
-                <ColumnLayout.Column span={8} style={{ maxWidth: 'fit-content' }}>
+                <ColumnLayout.Column span={8} style={{ maxWidth: '800px' }}>
                     <ShadowedDiv>
                         <Heading style={{ paddingLeft: '30px' }} level={3}>
                             {_(formLabel)}