Migrate Message UI breaks with long content

From /admin/structure/migrate/manage/<migration_group>/migrations/<migration_id>/messages

When fields ids and messages are long the Ui seems to break the table layout. Couple of issues:

1. guid usually has long string that renders wider than 100% of viewport width
2. tables are vertically aligned centrally - making guid appear blank unless scrolling down the page some way

Challenges

1. display table seem to narrow one column depending on the length on another column. Adding word-break break all to entire cell means also having to add minimum width to table heading, (each of which is a different length), "guid", "security level", "Message" and "Status" so that these columns are not narrower than text. (see screenshot)
2. Table also appears to be responsive, i.e. hiding certain columns on smaller viewports.

Suggestions for improvement

What we can do is add min width (in pixels) for each th element, and then let display table do it’s thing while adding vertical-align: top to each td cell while applying word-break: break all to the entire table. Not perfect but at least table is viewable in view port and you do not need to scroll down to see guid or message.

e.g.

1. Add work break (css) to entire table
2. Add min-width (pixels to th cells
3. Make sure td items are vertical align top

https://www.drupal.org/files/issues/2024-04-03/Screenshot%202024-04-03%2... →
https://www.drupal.org/files/issues/2024-04-03/Screenshot%202024-04-03%2... →
https://www.drupal.org/files/issues/2024-04-03/Screenshot%202024-04-03%2... →

also extra column is added for some reason.

https://www.drupal.org/files/issues/2024-04-03/Screenshot%202024-04-03%2... →
https://www.drupal.org/files/issues/2024-04-03/Screenshot%202024-04-03%2... →
https://www.drupal.org/files/issues/2024-04-03/Screenshot%202024-04-03%2... →