MAGETWO-37680: "Choose Variation" buttons lost alignment on "create Configurable Product" Backend page

Author: Oleg Zinoviev

app/code/Magento/ConfigurableProduct/view/adminhtml/web/product/product.css

@@ -160,8 +160,6 @@
 #product-variations-matrix .action-choose:hover,
 #product-variations-matrix .action-choose[disabled] {
     color: #b8b3a7;
-    float: right;
-    margin: 2px 0 0 5px;
 }
 
 #product-variations-matrix .action-choose:hover {
@@ -187,28 +185,15 @@
     color: #a09a8c;
 }
 
-#product-variations-matrix .col-name > input {
-    width: 88%;
+#product-variations-matrix .col-name > input,
+#product-variations-matrix .col-sku > input {
+    width: 90%;
 }
 
 #product-variations-matrix .col-actions {
     width: 60px;
 }
 
-#product-variations-matrix .col-name {
-    width: 29%;
-}
-
-#product-variations-matrix .col-sku {
-    width: 20%;
-}
-
-#product-variations-matrix .col-display,
-#product-variations-matrix .col-qty,
-#product-variations-matrix .col-weight {
-    width: 5%;
-}
-
 /* Select Associated Product popup window */
 #configurable_associated_products_grid .filter-actions,
 #configurable_associated_products_grid .filter {

app/design/adminhtml/Magento/backend/Magento_ConfigurableProduct/web/css/source/module.less

@@ -45,43 +45,63 @@
     }
 }
 
-#product-variations-matrix .actions-image-uploader {
-    .dropdown-split(
+#product-variations-matrix {
+    .actions-image-uploader {
+        .dropdown-split(
         @_dropdown-split-list-pointer: false
-    );
-    display: block;
-    width: 50px;
+        );
 
-    .action.toggle {
-        padding: 0 2px;
-        border: 1px solid #b7b2a7;
-        background: #fff;
-        border-radius: 0 4px 4px 0;
-        border-left: none;
-        height: 33px;
+        display: block;
+        width: 50px;
+
+        .action.toggle {
+            padding: 0 3px;
+            border: 1px solid #b7b2a7;
+            background: #fff;
+            border-radius: 0 1px 1px 0;
+            border-left: none;
+            height: 31px;
 
-        &.no-display {
-            display: none;
+            &.no-display {
+                display: none;
+            }
+
+            &:after {
+                width: 12px;
+                text-indent: -5px;
+            }
         }
 
-        &:after {
-            width: 12px;
-            text-indent: -5px;
+        ul.dropdown {
+            left: 0;
+            margin-left: 0;
+            width: 100px;
+
+            li:hover {
+                background: #eef8fc;
+            }
+
+            a {
+                color: #333;
+                text-decoration: none;
+            }
         }
     }
 
-    ul.dropdown {
-        left: 0;
-        margin-left: 0;
-        width: 100px;
+    .col-name {
+        position: relative;
+    }
 
-        li:hover {
-            background: #eef8fc;
-        }
+    .action-choose {
+        margin-left: 5px;
+        position: absolute;
+        top: 17px;
+    }
 
-        a {
-            color: #333;
-            text-decoration: none;
+    .col-qty,
+    .col-weight {
+        > input {
+            width: 5.5rem;
         }
     }
 }

app/design/adminhtml/Magento/backend/web/css/styles-old.less

@@ -345,10 +345,6 @@ input.no-display,
     .data-table .action-locked.active,
     .data-table .action-locked[disabled],
     #product-variations-matrix .action-choose,
-    #product-variations-matrix .action-choose:hover,
-    #product-variations-matrix .action-choose:active,
-    #product-variations-matrix .action-choose.active,
-    #product-variations-matrix .action-choose[disabled],
     .action-manage-images,
     .action-manage-images:hover,
     .action-manage-images:active,
@@ -406,7 +402,6 @@ input.no-display,
     .data-table .action-.delete[disabled],
     .data-table .action-delete[disabled],
     .data-table .action-locked[disabled],
-    #product-variations-matrix .action-choose[disabled],
     .image-panel .action-close[disabled],
     .image-panel-controls .action-remove[disabled],
     .suggest-expandable .action-show-all[disabled],