🪟 🎨 Increases GroupTitle followed divs width from 180px to 250px

[YatsukBogdan1]

What

Closes #8130

How

I was investigating the actual problem of the dropdown width, and find out next:

• first of all, I thought the cleanest solution would be to render all the text if possible inside the select container. I was looking into internal CSS styles of react-select components and they have complicated logic for calculating the width of the actual text inside the select component and they are using some hacks with position: absolute; so from this point seems it is hard to implement it that way

- the most straightforward solution here is to change the min-width of GroupTitle styled component followed divs from 180px to 250px, since they are located inside airbyte codebase, but I am not sure how this can affect other components over the application

Actual Result

[teallarson]

Yeah, react-select does some things that make this styling picky. I tried looking for other places that this change would affect and I haven't been able to find any.

250px doesn't look quite wide enough for all Google Sheets authentication options, though.

[YatsukBogdan1]

I increased the min-width to 350px, but again, not sure if this is not corrupting any other place in app

[teallarson]

It doesn't look like this affects other places in the UI. It does make the box wrap to another line for some connectors in the side-by-side docs view.

I'll defer to @timroes or @dizel852 on whether that's blocking or not.

[dizel852]

IMO Since the dropdown will have unpredictable width and it's hard to calculate it I'd suggest updating our form design - move the dropdown to a new line.

Like on the screenshot

@timroes @Upmitt guys, your thoughts?

We need to finally solve this UI issue since it is "dangling" from sprint to sprint.

[timroes]

@dizel852 @tealjulia @YatsukBogdan1 I've changed the code to use flexbox for this title, so that the select box will always take the remaining space between the label. Maybe you could double check this and see if this looks good for you as well. This also helped us getting rid of the weird "& > div" styling which styled children without the component really knowing what users might put as children into the title property.

Since this component is also used in the ArraySection component, I also checked e.g. the Salesforce connector where it's used without a dropdown. Please validate that during review as well.

Peek.2022-08-08.12-20.mp4

[YatsukBogdan1]

@dizel852 @tealjulia @YatsukBogdan1 I've changed the code to use flexbox for this title, so that the select box will always take the remaining space between the label. Maybe you could double check this and see if this looks good for you as well. This also helped us getting rid of the weird "& > div" styling which styled children without the component really knowing what users might put as children into the title property.

Since this component is also used in the ArraySection component, I also checked e.g. the Salesforce connector where it's used without a dropdown. Please validate that during review as well.

Peek.2022-08-08.12-20.mp4

looks good me, @tealjulia what do you think?

[dizel852]

Code LGTM.
Tested locally (Chrome, Safari and Firefox)