Create modal: Flow, wrapping, and alignment issues

[garrett]

As seen in #288, the create container dialog has alignment issues in some circumstances (screen width?)

Some labels wrap, some widgets wrap, and some (?) icons overflow. This causes all sorts of vertical alignment issues.

[garrett]

Perhaps we should override PF4 and remove the left space before the form items, as seen in red. And there seems to be too much horizontal space between the form elements and the removal icon, as seen in purple.

Removing this excess space won't fix the problem by itself, but it'll give the form more room to work with, so it can be part of the solution.

As the elements are distinct and even have separators, the hierarchy should still be communicated fine, even without the indentation.

[jelly]

Looking at it, it seems that the width of 800-1000px is the issue:

Maximum min-width where everything shows "ok":

< 800px everything is moved under to a column layout which seems fine to me.

Can't we change the breakpoint to be at 1000px instead of 800px?

Dropping this class would help, but it still doesn't look good on a width of 800-1000px.

.pf-c-form__field-group: {
grid-template-columns: minmax(var(--pf-c-form__field-group--GridTemplateColumns--toggle), max-content) 1fr;
}

Adjusting .pf-l-grid from 12 to 11 to remove the purple spacing still has issues on 801px width:

.pf-l-grid {
grid-template-columns:  repeat(11, [col-start] 1fr); 
}

Becomes:

We can override the breakpoint from PF as we do in cockpit-machines but that feels ugly.

[KKoukiou]

@jelly I suggest we add a gridBreakPoint variable to the Form upstream in PF4 exactly as they expose that for Tables.

[marusak]

@jelly was this fixed in https://github.com/cockpit-project/cockpit-podman/pull/834 ?

[jelly]

For the most part it's done, the only thing left is some small issues the md breakpoint but in general it looks a lot better now.