From ea01c8038bbdb9a672d112ecee0f5e505eca3825 Mon Sep 17 00:00:00 2001
From: Zamil Majdy <zamil.majdy@agpt.co>
Date: Tue, 31 Dec 2024 15:13:47 +0700
Subject: [PATCH] fix(frontend): Fix broken block UI layout (#9132)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://github.com/Significant-Gravitas/AutoGPT/pull/9097/files#diff-ef176e50a6a65af5df2182626ea868ce77b76de447c816fb4f80fb4d376c3049R7-R41
introduced styling changes to block UI layout which causes the block
layout broken:


![image](https://github.com/user-attachments/assets/0d3d6e61-1acc-440c-9c7b-8cc473b457ea)

This PR minimally reverts the styling change.

### Changes 🏗️

Minimal CSS revert to make the block UI layout back to normal.

### 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.css    | 49 +++----------------
 1 file changed, 8 insertions(+), 41 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/customnode.css b/autogpt_platform/frontend/src/components/customnode.css
index dd116fc67272..d947540f42b2 100644
--- a/autogpt_platform/frontend/src/components/customnode.css
+++ b/autogpt_platform/frontend/src/components/customnode.css
@@ -4,58 +4,26 @@
   transition: border-color 0.3s ease-in-out;
 }
 
-.custom-node [data-id="input-handles"] {
-  padding: 0 1.25rem;
-  margin-bottom: 1rem;
-}
-
+.custom-node [data-id="input-handles"],
 .custom-node [data-id="input-handles"] > div > div {
   margin-bottom: 1rem;
 }
 
-.handle-container {
-  display: flex;
-  position: relative;
-  margin-bottom: 0px;
-  padding: 0.75rem 1.25rem;
-  min-height: 44px;
-  height: 100%;
-}
-
 .custom-node input:not([type="checkbox"]),
 .custom-node textarea,
-.custom-node select {
-  width: calc(100% - 2.5rem);
+.custom-node select,
+.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;
-  margin: 0.5rem 1.25rem;
-}
-
-.custom-node [data-id^="date-picker"] {
-  margin: 0.5rem 1.25rem;
-  width: calc(100% - 2.5rem);
-}
-
-.custom-node [data-list-container] {
-  margin: 0.5rem 1.25rem;
-  width: calc(100% - 2.5rem);
-}
-
-.custom-node [data-add-item] {
-  margin: 0.5rem 1.25rem;
-  width: calc(100% - 2.5rem);
-  padding: 0.5rem;
 }
 
 .array-item-container {
   display: flex;
   align-items: center;
-  margin: 0.5rem 1.25rem;
-  width: calc(100% - 2.5rem);
-}
-
-.custom-node [data-content-settings] {
-  margin: 0.5rem 1.25rem;
-  width: calc(100% - 2.5rem);
+  min-width: calc(100% - 2.5rem);
 }
 
 .custom-node .custom-switch {
@@ -68,7 +36,6 @@
 .error-message {
   color: #d9534f;
   font-size: 13px;
-  margin: 0.25rem 1.25rem;
   padding-left: 0.5rem;
 }