From 8f1a0659768eb9eaf2984cf93e6ce8edaf6b7249 Mon Sep 17 00:00:00 2001
From: Zamil Majdy <zamil.majdy@agpt.co>
Date: Fri, 3 Jan 2025 17:59:06 +0700
Subject: [PATCH] fix(frontend): Make input layout & padding consistent (#9170)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

There are a few hardcoded margins and padding in the block input layout,
causing the input to sometimes overflow or be used inconsistently.


![image](https://github.com/user-attachments/assets/8a9b8e0d-04fd-4660-94d3-5dfe69cbc77d)


### Changes 🏗️

* Make padding consistent between left & right, top & bottom.
* Remove hard-coded margins.
* Match the hardcode negative margin for the right node handle to the
left node handle.
* Make the input box take the full width.

### Checklist 📋

#### For code changes:
- [ ] I have clearly listed my changes in the PR description
- [ ] I have made a test plan
- [ ] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [ ] ...

<details>
  <summary>Example test plan</summary>

  - [ ] Create from scratch and execute an agent with at least 3 blocks
- [ ] Import an agent from file upload, and confirm it executes
correctly
  - [ ] Upload agent to marketplace
- [ ] Import an agent from marketplace and confirm it executes correctly
  - [ ] Edit an agent from monitor, and confirm it executes correctly
</details>

#### For configuration changes:
- [ ] `.env.example` is updated or already compatible with my changes
- [ ] `docker-compose.yml` is updated or already compatible with my
changes
- [ ] I have included a list of my configuration changes in the PR
description (under **Changes**)

<details>
  <summary>Examples of configuration changes</summary>

  - Changing ports
  - Adding new services that need to communicate with each other
  - Secrets or environment variable changes
  - New or infrastructure changes such as databases
</details>
---
 .../frontend/src/components/CustomNode.tsx    | 10 +++-------
 .../frontend/src/components/NodeHandle.tsx    |  2 +-
 .../frontend/src/components/customnode.css    |  8 ++------
 .../src/components/node-input-components.tsx  | 19 ++++++++++---------
 4 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/CustomNode.tsx b/autogpt_platform/frontend/src/components/CustomNode.tsx
index 735abe555..7d2e6c54b 100644
--- a/autogpt_platform/frontend/src/components/CustomNode.tsx
+++ b/autogpt_platform/frontend/src/components/CustomNode.tsx
@@ -726,13 +726,10 @@ export function CustomNode({
       </div>
 
       {/* Body */}
-      <div className="ml-5 mt-6 rounded-b-xl">
+      <div className="mx-5 my-6 rounded-b-xl">
         {/* Input Handles */}
         {data.uiType !== BlockUIType.NOTE ? (
-          <div
-            className="flex w-fit items-start justify-between"
-            data-id="input-handles"
-          >
+          <div data-id="input-handles">
             <div>
               {data.uiType === BlockUIType.WEBHOOK_MANUAL &&
                 (data.webhook ? (
@@ -781,7 +778,6 @@ export function CustomNode({
               <Switch
                 onCheckedChange={toggleAdvancedSettings}
                 checked={isAdvancedOpen}
-                className="mr-5"
               />
             </div>
           </>
@@ -790,7 +786,7 @@ export function CustomNode({
         {data.uiType !== BlockUIType.NOTE && (
           <>
             <LineSeparator />
-            <div className="flex items-start justify-end rounded-b-xl pb-2 pr-2 pt-6">
+            <div className="flex items-start justify-end rounded-b-xl pt-6">
               <div className="flex-none">
                 {data.outputSchema &&
                   generateOutputHandles(data.outputSchema, data.uiType)}
diff --git a/autogpt_platform/frontend/src/components/NodeHandle.tsx b/autogpt_platform/frontend/src/components/NodeHandle.tsx
index 137e5e4c3..f733c1763 100644
--- a/autogpt_platform/frontend/src/components/NodeHandle.tsx
+++ b/autogpt_platform/frontend/src/components/NodeHandle.tsx
@@ -82,7 +82,7 @@ const NodeHandle: FC<HandleProps> = ({
           data-testid={`output-handle-${keyName}`}
           position={Position.Right}
           id={keyName}
-          className="group -mr-[26px]"
+          className="group -mr-[38px]"
         >
           <div className="pointer-events-none flex items-center">
             {label}
diff --git a/autogpt_platform/frontend/src/components/customnode.css b/autogpt_platform/frontend/src/components/customnode.css
index d947540f4..8e4ed0c87 100644
--- a/autogpt_platform/frontend/src/components/customnode.css
+++ b/autogpt_platform/frontend/src/components/customnode.css
@@ -15,15 +15,11 @@
 .custom-node [data-id^="date-picker"],
 .custom-node [data-list-container],
 .custom-node [data-add-item],
-.custom-node [data-content-settings] {
-  min-width: calc(100% - 2.5rem);
-  max-width: 400px;
-}
-
-.array-item-container {
+.custom-node [data-content-settings]. .array-item-container {
   display: flex;
   align-items: center;
   min-width: calc(100% - 2.5rem);
+  max-width: 100%;
 }
 
 .custom-node .custom-switch {
diff --git a/autogpt_platform/frontend/src/components/node-input-components.tsx b/autogpt_platform/frontend/src/components/node-input-components.tsx
index 04999420f..b97e2ed4e 100644
--- a/autogpt_platform/frontend/src/components/node-input-components.tsx
+++ b/autogpt_platform/frontend/src/components/node-input-components.tsx
@@ -201,7 +201,7 @@ export const NodeGenericInputField: FC<{
   className,
   displayName,
 }) => {
-  className = cn(className, "my-2");
+  className = cn(className);
   displayName ||= propSchema.title || beautifyString(propKey);
 
   if ("allOf" in propSchema) {
@@ -876,18 +876,19 @@ const NodeArrayInput: FC<{
             (c) => c.targetHandle === entryKey && c.target === nodeId,
           );
         return (
-          <div key={entryKey} className="self-start">
+          <div key={entryKey}>
+            <NodeHandle
+              keyName={entryKey}
+              schema={schema.items!}
+              isConnected={isConnected}
+              isRequired={false}
+              side="left"
+            />
             <div className="mb-2 flex space-x-2">
-              <NodeHandle
-                keyName={entryKey}
-                schema={schema.items!}
-                isConnected={isConnected}
-                isRequired={false}
-                side="left"
-              />
               {!isConnected &&
                 (schema.items ? (
                   <NodeGenericInputField
+                    className="w-full"
                     nodeId={nodeId}
                     propKey={entryKey}
                     propSchema={schema.items}