diff --git a/app/views/admin/products_v3/_product_row.html.haml b/app/views/admin/products_v3/_product_row.html.haml index 39a6e13e07..1d2c68eca3 100644 --- a/app/views/admin/products_v3/_product_row.html.haml +++ b/app/views/admin/products_v3/_product_row.html.haml @@ -9,15 +9,16 @@ %td.field = f.text_field :sku, 'aria-label': t('admin.products_page.columns.sku') = error_message_on product, :sku -%td.field{ 'data-controller': 'toggle-control', 'data-toggle-control-match-value': 'items' } +%td.multi-field{ 'data-controller': 'toggle-control', 'data-toggle-control-match-value': 'items' } = f.select :variant_unit_with_scale, options_for_select(WeightsAndMeasures.variant_unit_options, product.variant_unit_with_scale), {}, class: "fullwidth no-input", 'aria-label': t('admin.products_page.columns.unit_scale'), data: { "controller": "tom-select", "tom-select-options-value": '{ "plugins": [] }', action: "change->toggle-control#displayIfMatch"} - = f.text_field :variant_unit_name, 'aria-label': t('items'), 'data-toggle-control-target': 'control', style: (product.variant_unit == "items" ? "" : "display: none") - = error_message_on product, :variant_unit_name, 'data-toggle-control-target': 'control' + .field + = f.text_field :variant_unit_name, 'aria-label': t('items'), 'data-toggle-control-target': 'control', style: (product.variant_unit == "items" ? "" : "display: none") + = error_message_on product, :variant_unit_name, 'data-toggle-control-target': 'control' %td.align-right -# empty %td.align-right diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index b231f1ec2b..394f3398be 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -162,7 +162,12 @@ .field { padding: 0; - margin-bottom: 0.75em; + } + .multi-field { + // Allow wrap with small gap + display: flex; + flex-wrap: wrap; + gap: 3px; } label { @@ -362,8 +367,12 @@ border-radius: $border-radius; box-shadow: 0px 0px 8px 0px rgba($near-black, 0.25); - .field:last-child { - margin-bottom: 0; + .field{ + margin-bottom: 0.75em; + + &:last-child { + margin-bottom: 0; + } } input[disabled] {