From 5e4dd3864f8c44e27d7389cfae9044bba1d04f66 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 7 Feb 2024 12:35:23 +1100
Subject: [PATCH] Update image and modal size

Using a new 'fit' modal size.

On smaller screens, we need to allow the image to shrink. That's a good general rule, but I was hesitant to make it a global rule..
---
 app/components/modal_component/modal_component.scss | 6 ++++++
 app/views/admin/products_v3/_edit_image.html.haml   | 5 +++--
 app/webpacker/css/admin/modals.scss                 | 4 ++++
 spec/system/admin/products_v3/products_spec.rb      | 6 +++---
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/components/modal_component/modal_component.scss b/app/components/modal_component/modal_component.scss
index d8c3cdd3fc..72c0e74088 100644
--- a/app/components/modal_component/modal_component.scss
+++ b/app/components/modal_component/modal_component.scss
@@ -18,6 +18,12 @@
   p {
     margin-bottom: 0.5em;
   }
+
+  img {
+    // Ensure image fits in container
+    max-width: 100%;
+    height: auto;
+  }
 }
 
 /* prevent arrow on selected admin menu item appearing above modal */
diff --git a/app/views/admin/products_v3/_edit_image.html.haml b/app/views/admin/products_v3/_edit_image.html.haml
index 218bd29ef5..57fccaac76 100644
--- a/app/views/admin/products_v3/_edit_image.html.haml
+++ b/app/views/admin/products_v3/_edit_image.html.haml
@@ -1,7 +1,8 @@
-= render ModalComponent.new id: "#modal_edit_product_image_#{image.id}", instant: true, close_button: false do
+= render ModalComponent.new id: "#modal_edit_product_image_#{image.id}", instant: true, close_button: false, modal_class: :fit do
   %h2= t(".title")
 
-  %p= image_tag image.persisted? ? image.url(:product) : Spree::Image.default_image_url(:product)
+  -# Display image in the same way it appears in the shopfront popup
+  %p= image_tag image.persisted? ? image.url(:large) : Spree::Image.default_image_url(:large), width: 433, height: 433
 
   -# Submit to controller, because StimulusReflex doesn't support file uploads
   = form_for [:admin, product, image],
diff --git a/app/webpacker/css/admin/modals.scss b/app/webpacker/css/admin/modals.scss
index 72dc9dff88..20c27e9a67 100644
--- a/app/webpacker/css/admin/modals.scss
+++ b/app/webpacker/css/admin/modals.scss
@@ -168,6 +168,10 @@ dialog[open] {
   dialog {
     top: 6.25rem;
   }
+  .reveal-modal.fit,
+  dialog.fit {
+    width: fit-content;
+  }
   .reveal-modal.tiny,
   dialog.tiny {
     width: 30%;
diff --git a/spec/system/admin/products_v3/products_spec.rb b/spec/system/admin/products_v3/products_spec.rb
index 642265abea..52bc19c387 100644
--- a/spec/system/admin/products_v3/products_spec.rb
+++ b/spec/system/admin/products_v3/products_spec.rb
@@ -343,7 +343,7 @@ describe 'As an admin, I can manage products', feature: :admin_style_v3 do
         end
 
         expect(page).to have_content /Image has been successfully (updated|created)/
-        expect(product.image.reload.url(:product)).to match /500.jpg$/
+        expect(product.image.reload.url(:large)).to match /500.jpg$/
 
         within row_containing_name("Apples") do
           expect_page_to_have_image('500.jpg')
@@ -353,14 +353,14 @@ describe 'As an admin, I can manage products', feature: :admin_style_v3 do
 
     context "with existing image" do
       let!(:product) { create(:product_with_image, name: "Apples") }
-      let(:current_img_url) { product.image.url(:product) }
+      let(:current_img_url) { product.image.url(:large) }
 
       include_examples "updating image"
     end
 
     context "with default image" do
       let!(:product) { create(:product, name: "Apples") }
-      let(:current_img_url) { Spree::Image.default_image_url(:product) }
+      let(:current_img_url) { Spree::Image.default_image_url(:large) }
 
       include_examples "updating image"
     end