Right-Panel is overflowing during form-edit
- Dominant language
- TypeScript
- Stars
- 24
- Forks
- 27
- PR merge metrics
- No merged PRs in 30d
Description
### Right-Panel is overflowing during form-edit.
If the height of the form-body is too large, the right-panel starts to overflow and adds unused space at the bottom of the container. The issue only appears if the form contains boolean fields.

### Browser
Firefox 83.0 (64-bit)
The problem seems not to appear with the chrome browser.
### Cause
The problem is produced by the styling of gtx-checkbox.
```
gtx-checkbox [type="checkbox"]:not(:checked), gtx-checkbox [type="checkbox"]:checked {
position: absolute;
left: -9999px;
opacity: 0;
}
```
The editor-body is static positioned, thus the checkbox-element is anchored outside of the editor-body causing the right-panel to overflow.
A possible fix would be adding `position: relative` to the `mesh-boolean-field` to provide an anchor inside the editor-body.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by locating the gtx-checkbox styling and the mesh-boolean-field used by the form editor. Reproduce the issue in Firefox with a tall form containing boolean fields, then verify that the right panel no longer overflows or leaves unused space at the bottom.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100