Fix: Scrollable dialog

[jonasnobile]

Scroll inside dialog when content is longer than viewport.

---

This change is 

[github-actions]

Playwright Test Report

[attitude]

Reviewed 1 of 1 files at r1, 3 of 3 files at r2, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @jonasnobile)

---

packages/ui/src/styles/components/dialog.sass line 38 at r2 (raw file):

		animation: #{$cui-conf-globalPrefix}dialogIntroIn .2s .1s forwards
		max-height: 100%
		overflow-y: auto

This change seems to have no unnecessary side effects. However,... it way more safer not to have Dialogs direct responsibility solving overflow caused by unknown children. Moreover, the margin: 1em would cause children to look weirdly cropped, scrolling would hide the action buttons under the fold.

Solution would be to wrap dialog children with DialogModal, add overflow: auto rule to div with .cui-dialog-modal-body-wrapper class. This solution solves overflow needs but also protects important header/footer to be hidden when scrolled away.

Are you sure this change is necessary and you cannot use the DialogModal ui component?

[jonasnobile]

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @attitude)

---

packages/ui/src/styles/components/dialog.sass line 38 at r2 (raw file):

Previously, attitude (Martin Adamko) wrote…

This change seems to have no unnecessary side effects. However,... it way more safer not to have Dialogs direct responsibility solving overflow caused by unknown children. Moreover, the margin: 1em would cause children to look weirdly cropped, scrolling would hide the action buttons under the fold.

Solution would be to wrap dialog children with DialogModal, add overflow: auto rule to div with .cui-dialog-modal-body-wrapper class. This solution solves overflow needs but also protects important header/footer to be hidden when scrolled away.

Are you sure this change is necessary and you cannot use the DialogModal ui component?

I'm not using any UI component alone. I've discovered this bug thanks to SelectField createNewForm feature. Is it possible to use DialogModal instead of Dialog in SelectField component?

[attitude]

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @jonasnobile)

---

packages/ui/src/styles/components/dialog.sass line 38 at r2 (raw file):

Previously, jonasNobile (Jonáš Nobile) wrote…

I'm not using any UI component alone. I've discovered this bug thanks to SelectField createNewForm feature. Is it possible to use DialogModal instead of Dialog in SelectField component?

By SelectField you mean the [+] button of select-or-create feature? Anyways I see no reason why the DialogModal could not be used to wrap children inside the Dialog (not instead).

Could you try wrapping the create children of the dialog with DialogModal instead to fix your issue?

[jonasnobile]

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @attitude)

---

packages/ui/src/styles/components/dialog.sass line 38 at r2 (raw file):

Previously, attitude (Martin Adamko) wrote…

By SelectField you mean the [+] button of select-or-create feature? Anyways I see no reason why the DialogModal could not be used to wrap children inside the Dialog (not instead).

Could you try wrapping the create children of the dialog with DialogModal instead to fix your issue?

Dialog with DialogModal looks visually better, but didn't solve overflow problem.

[jonasnobile]

#651