From a19a73a9770a6b475e7ac9313bec45353d2330ab Mon Sep 17 00:00:00 2001
From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com>
Date: Wed, 2 Jul 2025 22:04:52 +0530
Subject: [PATCH] Fix: Remove white gap in workflow HTTP headers input field
 (#12812)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #12751

<img width="500" alt="Screenshot 2025-06-24 at 3 39 33 PM"
src="https://github.com/user-attachments/assets/a7b28fcb-8ba4-40c8-872e-8de8ce5286be"
/>

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Baptiste Devessier <baptiste@devessier.fr>
---
 .../FormFieldInputInnerContainer.tsx          |  4 +-
 .../components/FormTextFieldInput.tsx         |  2 +-
 .../components/KeyValuePairInput.tsx          | 80 +++++++++----------
 3 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldInputInnerContainer.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldInputInnerContainer.tsx
index ec646f543..8ce867948 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldInputInnerContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldInputInnerContainer.tsx
@@ -26,8 +26,8 @@ const StyledFormFieldInputInnerContainer = styled.div<FormFieldInputInnerContain
         `
       : css`
           border-right: none;
-          border-bottom-right-radius: none;
-          border-top-right-radius: none;
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
         `}
 
   box-sizing: border-box;
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx
index c13418100..fbc77490b 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx
@@ -91,7 +91,7 @@ export const FormTextFieldInput = ({
         ) : null}
       </FormFieldInputRowContainer>
       {hint && <InputHint>{hint}</InputHint>}
-      <InputErrorHelper>{error}</InputErrorHelper>
+      {error && <InputErrorHelper>{error}</InputErrorHelper>}
     </FormFieldInputContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/KeyValuePairInput.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/KeyValuePairInput.tsx
index 3d668ac21..39a1047c9 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/KeyValuePairInput.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/KeyValuePairInput.tsx
@@ -2,6 +2,7 @@ import { FormFieldInputContainer } from '@/object-record/record-field/form-types
 import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import { IconTrash } from 'twenty-ui/display';
@@ -14,21 +15,18 @@ const StyledContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(2)};
 `;
 
-const StyledRow = styled.div`
-  align-items: flex-start;
-  display: flex;
+const StyledKeyValueContainer = styled.div<{ readonly: boolean | undefined }>`
+  display: grid;
   gap: ${({ theme }) => theme.spacing(2)};
-`;
 
-const StyledKeyValueContainer = styled.div`
-  display: flex;
-  flex: 1;
-  gap: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledPlaceholder = styled.div`
-  aspect-ratio: 1;
-  height: ${({ theme }) => theme.spacing(8)};
+  ${({ readonly, theme }) =>
+    readonly
+      ? css`
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        `
+      : css`
+          grid-template-columns: repeat(2, minmax(0, 1fr)) ${theme.spacing(8)};
+        `};
 `;
 
 export type KeyValuePair = {
@@ -122,36 +120,34 @@ export const KeyValuePairInput = ({
       {label && <InputLabel>{label}</InputLabel>}
       <StyledContainer>
         {pairs.map((pair) => (
-          <StyledRow key={pair.id}>
-            <StyledKeyValueContainer>
-              <FormTextFieldInput
-                placeholder={keyPlaceholder}
-                readonly={readonly}
-                defaultValue={pair.key}
-                onChange={(value) =>
-                  handlePairChange(pair.id, 'key', value ?? '')
-                }
-                VariablePicker={WorkflowVariablePicker}
+          <StyledKeyValueContainer key={pair.id} readonly={readonly}>
+            <FormTextFieldInput
+              placeholder={keyPlaceholder}
+              readonly={readonly}
+              defaultValue={pair.key}
+              onChange={(value) =>
+                handlePairChange(pair.id, 'key', value ?? '')
+              }
+              VariablePicker={WorkflowVariablePicker}
+            />
+
+            <FormTextFieldInput
+              placeholder={valuePlaceholder}
+              readonly={readonly}
+              defaultValue={pair.value}
+              onChange={(value) =>
+                handlePairChange(pair.id, 'value', value ?? '')
+              }
+              VariablePicker={WorkflowVariablePicker}
+            />
+
+            {!readonly && pair.id !== pairs[pairs.length - 1].id ? (
+              <Button
+                onClick={() => handleRemovePair(pair.id)}
+                Icon={IconTrash}
               />
-              <FormTextFieldInput
-                placeholder={valuePlaceholder}
-                readonly={readonly}
-                defaultValue={pair.value}
-                onChange={(value) =>
-                  handlePairChange(pair.id, 'value', value ?? '')
-                }
-                VariablePicker={WorkflowVariablePicker}
-              />
-              {!readonly && pair.id !== pairs[pairs.length - 1].id ? (
-                <Button
-                  onClick={() => handleRemovePair(pair.id)}
-                  Icon={IconTrash}
-                />
-              ) : pairs.length > 1 ? (
-                <StyledPlaceholder />
-              ) : null}
-            </StyledKeyValueContainer>
-          </StyledRow>
+            ) : null}
+          </StyledKeyValueContainer>
         ))}
       </StyledContainer>
     </FormFieldInputContainer>