[FE-17481] Preven table sorting option from being hidden

[cmatzenbach]

💬 Description

Fixes issue where if table chart was resized to a small size, the column alignment buttons would float over the column name and sort button. Now the alignment buttons will move as close as they can to the column title before getting cut off. Moved these buttons to their own wrapper, with a flexbox layout and less padding so the buttons can get closer to the column title before being cut off.

📄 Jira Issue

Closes FE-17481

🔍 Verification Steps

1. Follow repro steps in corresponding jira ticket
2. Ensure the alignment buttons no longer overlay over the sort button and you can still sort a column when the table is resized to be very small.

📸 Screenshot

FE-17481.mp4

[johallar]

Don't need these positioning properties top/right if using flex to position

[johallar]

whoops i mean here

[cmatzenbach]

Good catch, fixed

[mapd-bot-os]

build succeeded

[mapd-bot-os]

build succeeded

[johallar]

I noticed the text alignment controls can overflow and be hidden, we should probably make sure the min column width accommodates the sorting and the alignment controls:

[mapd-bot-os]

build succeeded

[cmatzenbach]

I noticed the text alignment controls can overflow and be hidden, we should probably make sure the min column width accommodates the sorting and the alignment controls:

@johallar Ok, after spending hours playing around with this, unfortunately we can't do it with CSS. D3 is manually setting the size of the header and table cells on the elements when you re-size, and it has a set min-width it will only go to. By setting a min-width on the header, the header becomes mis-aligned with the table columns. We also can't decide on a standard min-width since the column names for the header vary in size. I tried to make it respect the elements present in that container (i.e. the sort buttons, column names, and alignment buttons) but the only way I could get it close was a lot of hacky manual resizing with d3 code, nothing worked with css. I'll open an UI improvement ticket that can be worked on later, as this at least solves the bug and offers an improvement over current UX.