From 2b7baf7fa91733142808091b1e423e5616ed00e4 Mon Sep 17 00:00:00 2001
From: Jorge Padilla <jorge.esteban.padilla@gmail.com>
Date: Thu, 25 Jan 2024 10:09:38 -0500
Subject: [PATCH] fix(frontend): fix overflow issue in fields (#3560)

---
 .../components/Fields/Auth/AuthApiKeyBase.tsx    |  4 ++--
 web/src/components/Fields/Auth/AuthBasic.tsx     |  4 ++--
 .../Fields/KeyValueList/KeyValueList.styled.ts   |  5 +++++
 .../Fields/KeyValueList/KeyValueList.tsx         | 16 ++++++++++------
 .../Fields/Metadata/Metadata.styled.ts           |  5 +++++
 web/src/components/Fields/Metadata/Metadata.tsx  | 16 ++++++++++------
 web/src/components/Fields/PlainAuth/Fields.tsx   |  4 ++--
 7 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/web/src/components/Fields/Auth/AuthApiKeyBase.tsx b/web/src/components/Fields/Auth/AuthApiKeyBase.tsx
index 2e48be0dbd..feb938f702 100644
--- 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
index 22fbe8fb76..d8444a84ef 100644
--- 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
index 2e40b832a3..ed2c132f5c 100644
--- 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
index 6c93dc88e5..4d0efbf6f4 100644
--- 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
index 1ba170261e..dc43a4b105 100644
--- 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
index 2e9801b091..af006b56d9 100644
--- 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
index eac94e0faf..fce6259126 100644
--- 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>