diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml index d32927aee4..fe722ec40f 100644 --- a/app/views/admin/products_v3/_table.html.haml +++ b/app/views/admin/products_v3/_table.html.haml @@ -38,11 +38,11 @@ = form.fields_for("products", product, index: nil) do |product_form| %tbody.relaxed{ 'data-record-id': product_form.object.id } %tr - %td.align-left.header + %td.field.align-left.header = product_form.hidden_field :id = product_form.text_field :name, 'aria-label': t('admin.products_page.columns.name') = error_message_on product, :name - %td.align-right + %td.field = product_form.text_field :sku, 'aria-label': t('admin.products_page.columns.sku') = error_message_on product, :sku %td.align-right diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index ff21786e13..4ea63f3a28 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -62,6 +62,7 @@ th, td { + vertical-align: top; padding: $padding-tbl-cell; border: none; diff --git a/app/webpacker/css/admin_v3/shared/forms.scss b/app/webpacker/css/admin_v3/shared/forms.scss index b269d6a3e2..6b9cb9cf8e 100644 --- a/app/webpacker/css/admin_v3/shared/forms.scss +++ b/app/webpacker/css/admin_v3/shared/forms.scss @@ -120,9 +120,20 @@ span.info { } // Inline error message .formError { + display: inline-block; color: $color-error; - font-style: italic; font-size: 85%; + + // Icon on left, with subsequent lines indented + text-indent: -0.6em; + margin-left: 1.2em; + + @extend .icon-remove-sign; + @extend [class^="icon-"]; + + &:before { + margin-right: 0.3em; + } } }