core: fix displaying for large ConfirmDialog dialogs

[jonah-iden]

Signed-off-by: Jonah Iden [email protected]

What it does

Fixes: #11985.

smaller css fixes for the confirm dialog so that it respects linebreaks and is scrollable in case of too much text.
I used pre-line for automatic line breaks so the dialog only needs vertical scroll though it could be nice if stacktraces or simmilar long lines are supposed to be displayed in it, to also give it horizontal scrolling

How to test

in sample-menu-contributions.ts in the sample command instead of returning an alert we can create a ConfirmDialog.
something like this

dialog = new ConfirmDialog({
    title: 'Sample Dialog',
    msg: 'A\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\nA\r\n'
});
return dialog.open();

clicking on sampleCommand in theia should then open the dialog with scrollable multiline message.

Review checklist

• As an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• As a reviewer, I agree to behave in accordance with the review guidelines

[paul-marechal]

I pushed a commit adding a sample command to try your feature and it seems like there is a bug: The text seems to be truncated where if the text is big enough it only displays the 100 last lines or so?

[jonah-iden]

oh yeah your totally right. Seems to be because of the display: flex. I'll look into it

[paul-marechal]

The changes are looking better, but I noticed that the main area goes down a bit too close to the buttons?

Notice how the scrollbar controls eat a bit of the OK button, so does the blue area.

[msujew]

Looks good to me 👍 I can confirm that this addresses the overflow and the newline issue.

[vince-fugnitto]

@jonah-iden @msujew I believe we should revert the changes or fix the regressions since the changes break dialogs like "open folder":

[jonah-iden]

thats not good at all. Im really sorry for that.
I may have a fix for that though. I'll link it here as soon as i created the PR