From d5b38b6711fa817347ed587eb50ed97d14d097f3 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 12:09:57 -0700
Subject: [PATCH] fix: align buy modal image placeholder

---
 .../src/components/modals/ConfirmBuyModal.jsx     |  4 +++-
 frontend/src/styles/ConfirmBuyModal.css           | 15 ++++++++++++++-
 frontend/tests/location-map-manager.spec.ts       |  1 +
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/modals/ConfirmBuyModal.jsx b/frontend/src/components/modals/ConfirmBuyModal.jsx
index 57d093a..86723af 100644
--- a/frontend/src/components/modals/ConfirmBuyModal.jsx
+++ b/frontend/src/components/modals/ConfirmBuyModal.jsx
@@ -93,7 +93,9 @@ export default function ConfirmBuyModal({
             {imageUrl ? (
               <img src={imageUrl} alt={item.item_name} className="confirm-buy-image" />
             ) : (
-              <div className="confirm-buy-image-placeholder">[ ]</div>
+              <div className="confirm-buy-image-placeholder" role="img" aria-label="No item photo">
+                <span aria-hidden="true">{"\uD83D\uDCE6"}</span>
+              </div>
             )}
           </div>
 
diff --git a/frontend/src/styles/ConfirmBuyModal.css b/frontend/src/styles/ConfirmBuyModal.css
index 6a64977..77bd67c 100644
--- a/frontend/src/styles/ConfirmBuyModal.css
+++ b/frontend/src/styles/ConfirmBuyModal.css
@@ -100,8 +100,21 @@
 }
 
 .confirm-buy-image-placeholder {
-  font-size: 4em;
+  width: min(58%, 150px);
+  aspect-ratio: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-width-medium) solid var(--color-border-light);
+  border-radius: var(--border-radius-lg);
+  background: var(--color-gray-100);
   color: var(--color-border-medium);
+  font-size: 4.75em;
+  line-height: 1;
+}
+
+.confirm-buy-image-placeholder span {
+  transform: translateY(0.02em);
 }
 
 .confirm-buy-quantity-section {
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index dbe1929..b1f9914 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -2325,6 +2325,7 @@ test("viewer can buy selected zone items from the map", async ({ page }) => {
   await page.getByRole("button", { name: "Mark french bread bought" }).click();
   await expect(page.locator(".confirm-buy-modal")).toBeVisible();
   await expect(page.locator(".confirm-buy-item-name")).toHaveText("french bread");
+  await expect(page.getByRole("img", { name: "No item photo" })).toHaveText("\uD83D\uDCE6");
   await page.getByRole("button", { name: "Mark as Bought" }).click();
 
   await expect.poll(() => boughtPayloads.length).toBe(1);