FIO-9245 DataGrid: Fix width and positioning for table buttons

[blakekrammes]

• Remove col-1 bootstrap class, which causes the button to expand to a large width in certain cases
• Reverts 3dde49a#diff-d4f4129fd92b63c9446af2cf9a7d3d15b45cfbfc8b7adb61b131e5c8c1227bdf

Link to Jira Ticket

https://formio.atlassian.net/browse/FIO-9245

Description

What changed?

Removed col-1 bootstrap class from the data grid table buttons, which takes 1/12 of the width of the grid row. In certain cases, when using Safari (and I think in certain cases when making the screen size smaller) the width of this button would expand dramatically and squash the other rows. I also removed the class from the data grid reorder button since the same problem could occur there. I also added display: block and margin: 0 auto to the buttons to center them in their table cells for a more consistent layout.

Why have you chosen this solution?

It seemed to me that a similar bootstrap class col-md-1 (which also takes up 1/12 of the grid row, but is applied at a breakpoint of screens sized >= 768px) was added in the bootstrap3 data grid template here and then copy/pasted to the bootstrap4 template. It was later modified to col-1 in bootstrap 4 here and col-1 was added in bootstrap5. However, while fixing the problem in most cases, it was still broken in Safari; I'm guessing that Safari is calculating the parent grid container differently somehow, so that 1/12 of its width is massive compared to the other items.

That change stemmed from this ticket https://formio.atlassian.net/browse/FIO-8303.

Here's a video demonstrating the fix in a few different environments (on Safari, with Form Manager, which uses bootstrap 4 still and on FVP). I was having trouble getting FVP to load in the @formio/bootstrap changes, so I apply them manually in the recording.

Screen.Recording.2024-12-09.at.12.00.12.PM.mov

Breaking Changes / Backwards Compatibility

Reverts 3dde49a#diff-d4f4129fd92b63c9446af2cf9a7d3d15b45cfbfc8b7adb61b131e5c8c1227bdf

Dependencies

n/a

How has this PR been tested?

Manually tested in the portal for Safari, Chrome, Firefox and Brave.

Checklist:

• I have completed the above PR template
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (if applicable)
• My changes generate no new warnings
• My changes include tests that prove my fix is effective (or that my feature works as intended)
• New and existing unit/integration tests pass locally with my changes
• Any dependent changes have corresponding PRs that are listed above