Hungary and Japan postcode position is not respected in Checkout.

[senadir]

Discussed in https://github.com/woocommerce/woocommerce-blocks/discussions/10693

^{Originally posted by passatgt August 22, 2023}
Hi! I just noticed that there are some inconsistency on how the form fields are rendered with the checkout block. To give you some examples:

With Hungary, notice theres two empty spaces:

(also with Hungary, we could hide the state field, since it is not used anymore for shipping or billing, we don't need to collect this info, but this is another topic)

With Germany, the address field jumps to the top:

With Japan, the layout looks okay, however if you check the country locale, the postcode field should be on the left, and the state field on the right:

The form-row-first and form-row-last classes are ignored in the checkout block. However, only Japan and Hungary actually uses these classes when defining the locale.

On the old checkout, both Hungary and Japan looks good, because the country field is 100% wide:

And on the old checkout, street address was below the country field:

Not sure about the solution, but something to think about. Both Hungary and Japan could be fixed in the locale to match the other countries, but the empty space would still be there and it would mess with the layout of the old checkout, since both are coming from the same function.

[nielslange]

Not sure about the solution, but something to think about. Both Hungary and Japan could be fixed in the locale to match the other countries, but the empty space would still be there and it would mess with the layout of the old checkout, since both are coming from the same function.

Similar to the PR for displaying express payment buttons, we could address this issue using flexbox.

We could wrap each row in an outer div. If there's one inner div, that div has a width of 100%. If there are two inner divs, each div has a width of 50%. Here's a brief example of how this could be accomplished:

<div class="outer">
    <div>Inner Div 1</div>
</div>

<div class="outer">
    <div>Inner Div 1</div>
    <div>Inner Div 2</div>
</div>

.outer {
    display: flex;
}

.outer > div {
    flex: 1;
}

Here's a live demo: https://codepen.io/nielslange/pen/jOXbzxe?editors=1100

[ralucaStan]

@tarhi-saad could you try to replicate this issue? I appreciate the help

[tarunvijwani]

@ralucaStan I'm able to reproduce the issue.

[ralucaStan]

Thank you Tarun, adding this to the current sprint