Fix: Keep file input in DOM during print area editing

Changed PhotoPrintAreaField to use CSS display:none instead of conditional rendering
to hide the file input when the print area editor is open. This prevents the file
input element from being removed from the DOM, which was causing the selected file
to be lost before form submission.

The issue occurred when:
1. User selected an image file
2. Preview loaded and print area editor opened (showPrintAreaEditor = true)
3. React conditionally removed the file input from the DOM
4. Form submission lost the file data because the input no longer existed

Now the file input stays in the DOM (just hidden), so the file data persists
through form submission.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/app/admin/products/actions.ts

@@ -74,6 +74,7 @@ export async function createProduct(formData: FormData) {
   const sizesInput = String(formData.get('sizes') ?? '');
   const imageFile = formData.get('image') as File | null;
   const imageBackFile = formData.get('imageBack') as File | null;
+
   const photoRecolorable = String(formData.get('photoRecolorable') ?? '') === '1';
   const showOnPersonalised = String(formData.get('showOnPersonalised') ?? '') === '1';
   const showAsPlain = String(formData.get('showAsPlain') ?? '') === '1';

src/components/PhotoPrintAreaField.tsx

@@ -110,8 +110,7 @@ export default function PhotoPrintAreaField({
         </div>
       )}
 
-      {!currentImageUrl || !showPrintAreaEditor ? (
+      <div style={{ display: showPrintAreaEditor && currentImageUrl ? 'none' : 'block' }}>
-        <>
         <input
           ref={fileInputRef}
           id={fieldName}
@@ -153,8 +152,7 @@ export default function PhotoPrintAreaField({
             </button>
           </div>
         )}
-        </>
+      </div>
-      ) : null}
 
       {currentImageUrl && showPrintAreaEditor && (
         <div className="mt-4">