Limit the size of the dialog box and let the message overflow

[werat]

In case the error message is too large the dialog box can be too big and not fit into the screen. Add a height limit for the details message and let it overflow with scrollbars.

[werat]

Friendly ping

[bpasero]

The dialog can still overflow if the message is very large:

I would think that a fix here should also consider message and not just detail.

Interestingly a native macOS dialog also explodes:

[bpasero]

I actually wonder if we should address this for both custom and native dialogs (see #87266) and simply cut the message and the detail off when it becomes very large. We could cut it of in the middle and add a "..." ellipsis. Then, this fix becomes something to be changed here, rather than CSS:

vscode/src/vs/platform/dialogs/common/dialogs.ts

Line 320 in bce484e

export abstract class AbstractDialogHandler implements IDialogHandler {

This is the abstract dialog handler used for both web and desktop (custom and native) and it could massage the options to reduce their length.

[werat]

Thank you for the review and comments!

I would think that a fix here should also consider message and not just detail.

I made the whole message container scrollable, this should fix the problem of a very large message too.

I actually wonder if we should address this for both custom and native dialogs (see #87266) and simply cut the message and the detail off when it becomes very large.

This was my initial approach actually, but in the end I've decided against it:

• Very long error messages are rare and it should be a real shame to cut out the important information
• Since it's rare, the "prettiness" of the UI is not super important and being able to see the whole error might be worth having a slighly uglier dialog.

I did not think of the native dialogs though. Is it possible to make them scrollable too?

[werat]

@bpasero do you think my updated fix is fine or would you still prefer to truncate the message in the base dialog handler?