Show edit button only when hover image

This required some branching in the haml, which would be nice to avoid. But we have more work to do here so we'll refactor at the end.

app/views/admin/products_v3/_table.html.haml

@@ -49,10 +49,13 @@
         %tbody.relaxed{ 'data-record-id': product_form.object.id }
           %tr
             %td.with-image
-              .image-field
-                = image_tag product.image&.url(:mini) || Spree::Image.default_image_url(:mini), width: 40, height: 40
-                - if product.image.present?
-                  = link_to t('admin.products_page.image.edit'), edit_admin_product_image_path(product, product.image), class: "button secondary mini", "data-controller": "modal", "data-reflex": "click->products#edit_image", "data-current-id": product.id
+              - if product.image.present?
+                %a.image-field{ href: edit_admin_product_image_path(product, product.image), data: { controller: "modal", reflex: "click->products#edit_image", "current-id": product.id} }
+                  = image_tag product.image&.url(:mini), width: 40, height: 40
+                  .button.secondary.mini= t('admin.products_page.image.edit')
+              - else
+                .image-field
+                  = image_tag Spree::Image.default_image_url(:mini), width: 40, height: 40
             %td.field.align-left.header
               = product_form.hidden_field :id
               = product_form.text_field :name, 'aria-label': t('admin.products_page.columns.name')

app/webpacker/css/admin/products_v3.scss

@@ -88,10 +88,6 @@
           height: 100%;
         }
       }
-
-      .image-field .button {
-        display: block;
-      }
     }
 
     th,
@@ -379,7 +375,7 @@
     }
   }
 
-  .image-field {
+  a.image-field {
     position: relative;
 
     img {
@@ -388,10 +384,18 @@
     }
 
     .button {
-      display: none; // to be shown on tr:hover
+      display: none; // to be shown on hover
       position: absolute;
       bottom: 0;
       left: 0;
     }
+
+    &:hover,
+    &:focus {
+      .button.secondary {
+        display: block;
+        background-color: $color-btn-secondary-hover-bg;
+      }
+    }
   }
 }