[dialogs] improve display of dialogs

[vince-fugnitto]

Description

Currently, dialogs which have a lot of content are not properly displayed (width-wise).

In order to fix their entire content, the dialog will take up as much width as possible which gives off a poor UX. Instead of placing the responsibility on developers to place carriage returns, the application should define proper max-width rules to enforce a consistent layout.

Developers are still free to extend existing dialogs in order to style them as they so choose.

For example:

[vince-fugnitto]

We can add a new optional parameter to DialogProps for which we control the desired width of the dialog. This will mean that existing dialogs will not be broken by the change, but we can adjust internal dialogs with the new parameter.

theia/packages/core/src/browser/dialogs.ts

Lines 24 to 26 in 8dcd431

	export class DialogProps {
	readonly title: string;
	}

[JesterOrNot]

Can I work on this?
I would first like to create the optional variable and then figure out how to apply the new instance variable to the dialogs

[vince-fugnitto]

Can I work on this?

Sure! 👍

[JesterOrNot]

I've created the instance variable how do I implement the maxWidth part?

[vince-fugnitto]

I've created the instance variable how do I implement the maxWidth part?

I was thinking of adding a new optional property to the DialogProps, and based on the value we'd update the styling of the dialog (maxWidth, wordWrap). Perhaps some changes will be need to be made to the AbstractDialog in order to be able to customize the outer container.

Then we can do something like the following in the constructor of a dialog:

this.container.setAttribute(`style`, `max-width: ${max-width} px`);

Callers could do the following:

new ConfirmDialog({
  title: 'title'
  maxWidth: 150,
  msg: 'msg',
  ok: 'yes',
  cancel: 'No'
});

[kaiyue0329]

@vince-fugnitto Would using flex-wrap: wrap; on the dialog be an alternative solution?

[vince-fugnitto]

Closed by #7080