fix(frontend): fix overflow issue in fields (#3560)

kubeshop · Jan 25, 2024 · 2b7baf7 · 2b7baf7
1 parent 01c2974
commit 2b7baf7
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 18 deletions.
diff --git a/web/src/components/Fields/Auth/AuthApiKeyBase.tsx b/web/src/components/Fields/Auth/AuthApiKeyBase.tsx
@@ -12,7 +12,7 @@ const AuthApiKeyBase = ({baseName}: IProps) => (
     <S.FlexContainer>
       <Form.Item
         data-cy="apiKey-key"
-        style={{flexBasis: '50%'}}
+        style={{flexBasis: '50%', overflow: 'hidden'}}
         name={[...baseName, 'apiKey', 'key']}
         label="Key"
         rules={[{required: true}]}
@@ -21,7 +21,7 @@ const AuthApiKeyBase = ({baseName}: IProps) => (
       </Form.Item>
       <Form.Item
         data-cy="apiKey-value"
-        style={{flexBasis: '50%'}}
+        style={{flexBasis: '50%', overflow: 'hidden'}}
         name={[...baseName, 'apiKey', 'value']}
         label="Value"
         rules={[{required: true}]}

diff --git a/web/src/components/Fields/Auth/AuthBasic.tsx b/web/src/components/Fields/Auth/AuthBasic.tsx
@@ -12,7 +12,7 @@ const AuthBasic = ({baseName}: IProps) => (
   <S.Row>
     <S.FlexContainer>
       <Form.Item
-        style={{flexBasis: '50%'}}
+        style={{flexBasis: '50%', overflow: 'hidden'}}
         name={[...baseName, 'basic', 'username']}
         data-cy="basic-username"
         label="Username"
@@ -21,7 +21,7 @@ const AuthBasic = ({baseName}: IProps) => (
         <Editor type={SupportedEditors.Interpolation} />
       </Form.Item>
       <Form.Item
-        style={{flexBasis: '50%'}}
+        style={{flexBasis: '50%', overflow: 'hidden'}}
         name={[...baseName, 'basic', 'password']}
         label="Password"
         data-cy="basic-password"

diff --git a/web/src/components/Fields/KeyValueList/KeyValueList.styled.ts b/web/src/components/Fields/KeyValueList/KeyValueList.styled.ts
@@ -11,3 +11,8 @@ export const DeleteIcon = styled(DeleteOutlined)`
   color: ${({theme}) => theme.color.textSecondary};
   font-size: ${({theme}) => theme.size.md};
 `;
+
+export const Item = styled.div`
+  flex: 1;
+  overflow: hidden;
+`;
diff --git a/web/src/components/Fields/KeyValueList/KeyValueList.tsx b/web/src/components/Fields/KeyValueList/KeyValueList.tsx
@@ -29,13 +29,17 @@ const KeyValueList = ({
         <>
           {fields.map((field, index) => (
             <S.KeyValueContainer key={field.name}>
-              <Form.Item name={[field.name, 'key']} noStyle>
-                <Editor type={SupportedEditors.Interpolation} placeholder={`${keyPlaceholder} ${index + 1}`} />
-              </Form.Item>
+              <S.Item>
+                <Form.Item name={[field.name, 'key']} noStyle>
+                  <Editor type={SupportedEditors.Interpolation} placeholder={`${keyPlaceholder} ${index + 1}`} />
+                </Form.Item>
+              </S.Item>
 
-              <Form.Item name={[field.name, 'value']} noStyle>
-                <Editor type={SupportedEditors.Interpolation} placeholder={`${valuePlaceholder} ${index + 1}`} />
-              </Form.Item>
+              <S.Item>
+                <Form.Item name={[field.name, 'value']} noStyle>
+                  <Editor type={SupportedEditors.Interpolation} placeholder={`${valuePlaceholder} ${index + 1}`} />
+                </Form.Item>
+              </S.Item>
 
               <Form.Item noStyle>
                 <Button

diff --git a/web/src/components/Fields/Metadata/Metadata.styled.ts b/web/src/components/Fields/Metadata/Metadata.styled.ts
@@ -11,3 +11,8 @@ export const DeleteIcon = styled(DeleteOutlined)`
   color: ${({theme}) => theme.color.textSecondary};
   font-size: ${({theme}) => theme.size.md};
 `;
+
+export const Item = styled.div`
+  flex: 1;
+  overflow: hidden;
+`;
diff --git a/web/src/components/Fields/Metadata/Metadata.tsx b/web/src/components/Fields/Metadata/Metadata.tsx
@@ -11,13 +11,17 @@ const Metadata = () => (
         <>
           {fields.map((field, index) => (
             <S.HeaderContainer key={field.name}>
-              <Form.Item name={[field.name, 'key']} noStyle>
-                <Editor type={SupportedEditors.Interpolation} placeholder={`Key ${index + 1}`} />
-              </Form.Item>
+              <S.Item>
+                <Form.Item name={[field.name, 'key']} noStyle>
+                  <Editor type={SupportedEditors.Interpolation} placeholder={`Key ${index + 1}`} />
+                </Form.Item>
+              </S.Item>
 
-              <Form.Item name={[field.name, 'value']} noStyle>
-                <Editor type={SupportedEditors.Interpolation} placeholder={`Value ${index + 1}`} />
-              </Form.Item>
+              <S.Item>
+                <Form.Item name={[field.name, 'value']} noStyle>
+                  <Editor type={SupportedEditors.Interpolation} placeholder={`Value ${index + 1}`} />
+                </Form.Item>
+              </S.Item>
 
               <Form.Item noStyle>
                 <Button

diff --git a/web/src/components/Fields/PlainAuth/Fields.tsx b/web/src/components/Fields/PlainAuth/Fields.tsx
@@ -15,7 +15,7 @@ const Fields = ({baseName}: IProps) => (
         data-cy="plain-username"
         label="Username"
         rules={[{required: true}]}
-        style={{flexBasis: '50%'}}
+        style={{flexBasis: '50%', overflow: 'hidden'}}
       >
         <Editor type={SupportedEditors.Interpolation} placeholder="Kafka Plain Username" />
       </Form.Item>
@@ -25,7 +25,7 @@ const Fields = ({baseName}: IProps) => (
         label="Password"
         data-cy="plain-password"
         rules={[{required: true}]}
-        style={{flexBasis: '50%'}}
+        style={{flexBasis: '50%', overflow: 'hidden'}}
       >
         <Editor type={SupportedEditors.Interpolation} placeholder="Kafka Plain Password" />
       </Form.Item>