Skip to content

Commit

Permalink
fix(frontend): Fix broken block UI layout (#9132)
Browse files Browse the repository at this point in the history
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>
  • Loading branch information
majdyz authored Dec 31, 2024
1 parent a646e60 commit ea01c80
Showing 1 changed file with 8 additions and 41 deletions.
49 changes: 8 additions & 41 deletions autogpt_platform/frontend/src/components/customnode.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -68,7 +36,6 @@
.error-message {
color: #d9534f;
font-size: 13px;
margin: 0.25rem 1.25rem;
padding-left: 0.5rem;
}

Expand Down

0 comments on commit ea01c80

Please sign in to comment.