From fec58f2d61950cbb40fa823afd0489c6b020a560 Mon Sep 17 00:00:00 2001 From: Saad Tarhi Date: Fri, 10 Nov 2023 08:07:49 +0100 Subject: [PATCH] Fix the Layout for Shipping and Billing Address Forms in the Checkout Block (#11486) * Fix empty spaces in the address form * Fix checkout layout for Japan and Hungary * Added some comments in CSS --- .../checkout/inner-blocks/checkout-fields-block/style.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss b/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss index 81f2689ad14..808a583734d 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss +++ b/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss @@ -18,11 +18,11 @@ display: flex; flex-wrap: wrap; justify-content: space-between; + gap: 0 calc(#{$gap-smaller} * 2); // Required for spacing especially when using flex-grow .wc-block-components-text-input, - .wc-block-components-country-input, .wc-block-components-state-input { - flex: 0 0 calc(50% - #{$gap-smaller}); + flex: 1 0 calc(50% - #{$gap-smaller}); // "flex-grow = 1" allows the input to grow to fill the space box-sizing: border-box; &:nth-of-type(2), @@ -33,7 +33,8 @@ .wc-block-components-address-form__company, .wc-block-components-address-form__address_1, - .wc-block-components-address-form__address_2 { + .wc-block-components-address-form__address_2, + .wc-block-components-country-input { flex: 0 0 100%; } }