fix(frontend): Fix broken block UI layout (#9132)

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>
This commit is contained in:
Zamil Majdy 2024-12-31 15:13:47 +07:00 committed by GitHub
parent a646e60d2f
commit ea01c8038b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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;
}