[UI] Form heading much shorter than needed

[jonasraoni]

Describe the bug
There are some headers enclosed with a .pkpFormGroup__heading, which limits the width in 30% (it should probably be used together with something else consuming the remaining 70%), which breaks texts in an unexpected way.

It's needed to inspect other usages across the codebase to define if it's a bug or a class misuse.

To Reproduce
Steps to reproduce the behavior:

1. Go to Workflow Settings > Emails

What application are you using?
OJS 3.4rc2

Additional information

[asmecher]

@jonasraoni, is this a showstopper, or just annoying? Wondering whether to schedule for 3.4.0-0 or a subsequent build.

[jonasraoni]

It's not important, I was just navigating on this interface to inspect a fatal error (#8975) and flagged the issues that I saw.

[rahmanramsi]

I think it supposed to be like this right?

[jardakotesovec]

This was happening in chrome based browsers as it does not support the css property float: inline-start; yet. It worked fine in firefox/safari - thats probably why it was overlooked.

To address it I added fallback float properties that are widely supported. In similar situation in future its better to move the layout from float to flex as flex has good support for RTL languages out of the box. But to keep the changes simple for now I sticked with float.

PRs:
ui-library: pkp/ui-library#279
ojs: pkp/ojs#3994
omp: pkp/omp#1435
ops: pkp/ops#550

[jardakotesovec]

@asmecher @Vitaliy-1 Not sure whether its too late for it, but maybe this could be considered for 3.4.0-2. It affects quite a lot of screens - its just layout.. but still quite significant. Including multilingual forms that looks broken. It affects all chrome based browsers, which is also quite significant. I did test the changes carefully...

[Vitaliy-1]

Looks good! Just a comment regarding commenting and it's ready to go to the stable and main.

In similar situation in future its better to move the layout from float to flex as flex has good support for RTL languages out of the box

At the time of development, flex was too young standard to adopt without consequences (in terms of browser support). We can decide to heighten the requirements as it's quite mature enough now. Edit sorry, was thinking about grid layout.

[jardakotesovec]

@Vitaliy-1 Good feedback, thanks. I end up removing both comment and the original inline-start as you pointed out it will take long time before that has good browser support. And reason for change is in commit message, which also reference this issues for more details, so I think that should be sufficient.

[asmecher]

Thanks, and agreed, this is a good candidate for 3.4.0. @Vitaliy-1 and @jardakotesovec, I'll leave this to you two to merge and port when you're both ready.

[jardakotesovec]

@asmecher @Vitaliy-1 Its now merged to 3.4.0 and cherry-picked for main.

[asmecher]

Excellent, thanks!