Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Overlapping controls in side panel in canvas #847

Closed
tplevko opened this issue Feb 20, 2024 · 1 comment · Fixed by #871
Closed

Overlapping controls in side panel in canvas #847

tplevko opened this issue Feb 20, 2024 · 1 comment · Fixed by #871
Assignees
@lordrip
Labels
bug Something isn't working canvas/config-form Configuration form related issues ui/ux This issue is about improving the UI / UX
Milestone
2.0.0 TP2

Comments

@tplevko
Copy link
Contributor

tplevko commented Feb 20, 2024 •
edited
Loading

Describe the Bug

This is an issue with the controls e.g. in Saga processor in the side panel canvas configuration - the side scrolling bar in the panel is overlapping with the add and remove buttons for options.

Steps to Reproduce the Bug or Issue

  1. Create Saga processor to integration
  2. Try to add and remove "options" using the side controls

Screenshots or Videos

vokoscreenNG-2024-02-20_07-57-02.mp4

Platform

  • OS: [e.g. macOS, Windows, Linux]
  • Browser: [Firefox]
  • Version: [e.g. 0.30.0]
@tplevko tplevko added bug Something isn't working canvas/config-form Configuration form related issues ui/ux This issue is about improving the UI / UX labels Feb 20, 2024
@lordrip
Copy link
Member

lordrip commented Feb 20, 2024

It seems like the form is being collapsed, instead of the container. Ideally, the form should grow as necessary, while the sidebar container should be static at 100% with overflow: scroll

lordrip added a commit to lordrip/kaoto that referenced this issue Feb 26, 2024
@lordrip
fix(CanvasForm): Scrollbar overlapping controls
9cf3e9e 
Currently, the `CanvasForm` component shows its scrollbars on top of the
form controls, effectively blocking adding or removing elements from an
Array.

The fix is to:
1. Make the `<Card>` component take the entire height available without
   scroll
2. Make the `CanvasForm` body to have `scroll: auto`, this way, the
   scroll bar will be drawn outside of the container, as opposed as it
   was before, where the form had the scroll

fix: KaotoIO#847
fix: KaotoIO#824
@lordrip lordrip mentioned this issue Feb 26, 2024
Merged
@lordrip lordrip added this to the 2.0.0 TP2 milestone Feb 26, 2024
@lordrip lordrip self-assigned this Feb 26, 2024
lordrip added a commit that referenced this issue Feb 26, 2024
@lordrip
fix(CanvasForm): Scrollbar overlapping controls
ea79208 
Currently, the `CanvasForm` component shows its scrollbars on top of the
form controls, effectively blocking adding or removing elements from an
Array.

The fix is to:
1. Make the `<Card>` component take the entire height available without
   scroll
2. Make the `CanvasForm` body to have `scroll: auto`, this way, the
   scroll bar will be drawn outside of the container, as opposed as it
   was before, where the form had the scroll

fix: #847
fix: #824
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@lordrip lordrip

Labels
bug Something isn't working canvas/config-form Configuration form related issues ui/ux This issue is about improving the UI / UX
Projects
Kanban Board
Archived in project
Milestone
2.0.0 TP2
Development

Successfully merging a pull request may close this issue.

fix(CanvasForm): Scrollbar overlapping controls lordrip/kaoto
2 participants
@tplevko @lordrip