Repeating groups: Overflowing table squashes button

[olemartinorg]

Description of the bug

In some cases, large tables used for previewing repeating group contents can lead to squashed buttons:

To a human it's quite obvious that the two columns containing numbers here should get less screen-space, and the title-columns and button-columns should get more (to fill them).

I'll be the first to point out that I've spent a considerable amount of time in a previous project trying to intelligently manage column widths in data tables to make sure content is spaced out to maximize screen real estate - so I would suggest a simpler solution where app developers can control this instead.

Suggestion 1 (large effort)

It seems to be the case that table headers currently overflow to use multiple lines, making sure to fit all the text. For the table body however, content is cut off with ellipsis when overflowing.

Allow for options to control the width of each column, i.e.:

• A fixed percentage of the full width (i.e. 20%)
• Non-breaking, use as much space as is needed (default for the button column)
• Divide the rest of the available width equally (this seems to be the default for non-button columns)
• Possibly allow for options to display the full content over multiple lines without ellipsis when overflowing (UX needs to be considered)

Suggestion 2 (smaller effort)

Make sure the button column is displayed in full. ✌️

Steps To Reproduce

1. Create a group/table with lots of content
2. Force buttons to have long labels, or cause validation to increase the size of the buttons
3. Observe something similar to the screenshot above

Additional Information

This could also have a certain overlap with the table project

[olemartinorg]

Consider if we should wait until the new Table design from the design system arrives before we look more into this. As soon as that is implemented in app-frontend, this might all change and this issue might not be relevant anymore.