fix: improve map buy modal controls

frontend/src/components/modals/ConfirmBuyModal.jsx

@@ -1,6 +1,15 @@
 import { useEffect, useState } from "react";
 import "../../styles/ConfirmBuyModal.css";
 
+function ChevronIcon({ direction }) {
+  const path = direction === "previous" ? "M15 18l-6-6 6-6" : "M9 18l6-6-6-6";
+  return (
+    <svg className="confirm-buy-nav-icon" viewBox="0 0 24 24" aria-hidden="true">
+      <path d={path} />
+    </svg>
+  );
+}
+
 export default function ConfirmBuyModal({
   item,
   onConfirm,
@@ -81,12 +90,15 @@ export default function ConfirmBuyModal({
 
         <div className="confirm-buy-image-section">
           <button
+            type="button"
             className="confirm-buy-nav-btn confirm-buy-nav-prev"
             onClick={handlePrev}
             style={{ visibility: hasPrev ? "visible" : "hidden" }}
             disabled={!hasPrev || isSubmitting}
+            aria-label="Previous item"
+            title="Previous item"
           >
-            {"<"}
+            <ChevronIcon direction="previous" />
           </button>
 
           <div className="confirm-buy-image-container">
@@ -100,18 +112,22 @@ export default function ConfirmBuyModal({
           </div>
 
           <button
+            type="button"
             className="confirm-buy-nav-btn confirm-buy-nav-next"
             onClick={handleNext}
             style={{ visibility: hasNext ? "visible" : "hidden" }}
             disabled={!hasNext || isSubmitting}
+            aria-label="Next item"
+            title="Next item"
           >
-            {">"}
+            <ChevronIcon direction="next" />
           </button>
         </div>
 
         <div className="confirm-buy-quantity-section">
           <div className="confirm-buy-counter">
             <button
+              type="button"
               onClick={handleDecrement}
               className="confirm-buy-counter-btn"
               disabled={quantity <= 1 || isSubmitting}
@@ -125,6 +141,7 @@ export default function ConfirmBuyModal({
               className="confirm-buy-counter-display"
             />
             <button
+              type="button"
               onClick={handleIncrement}
               className="confirm-buy-counter-btn"
               disabled={quantity >= maxQuantity || isSubmitting}
@@ -135,10 +152,10 @@ export default function ConfirmBuyModal({
         </div>
 
         <div className="confirm-buy-actions">
-          <button onClick={onCancel} className="confirm-buy-cancel" disabled={isSubmitting}>
+          <button type="button" onClick={onCancel} className="confirm-buy-cancel" disabled={isSubmitting}>
             Cancel
           </button>
-          <button onClick={handleConfirm} className="confirm-buy-confirm" disabled={isSubmitting}>
+          <button type="button" onClick={handleConfirm} className="confirm-buy-confirm" disabled={isSubmitting}>
             {isSubmitting ? "Saving..." : "Mark as Bought"}
           </button>
         </div>

frontend/src/styles/ConfirmBuyModal.css

@@ -52,13 +52,12 @@
 }
 
 .confirm-buy-nav-btn {
-  width: 35px;
-  height: 35px;
+  width: 40px;
+  height: 40px;
   border: var(--border-width-medium) solid var(--color-primary);
   border-radius: var(--border-radius-full);
   background: var(--color-bg-surface);
   color: var(--color-primary);
-  font-size: 1.8em;
   font-weight: bold;
   cursor: pointer;
   transition: var(--transition-base);
@@ -70,6 +69,18 @@
   flex-shrink: 0;
 }
 
+.confirm-buy-nav-icon {
+  width: 22px;
+  height: 22px;
+  display: block;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
 .confirm-buy-nav-btn:hover:not(:disabled) {
   background: var(--color-primary);
   color: var(--color-text-inverse);
@@ -273,9 +284,8 @@
   }
 
   .confirm-buy-nav-btn {
-    width: 30px;
-    height: 30px;
-    font-size: 1.6em;
+    width: 40px;
+    height: 40px;
   }
 
   .confirm-buy-counter-btn {
@@ -312,8 +322,7 @@
   }
 
   .confirm-buy-nav-btn {
-    width: 28px;
-    height: 28px;
-    font-size: 1.4em;
+    width: 40px;
+    height: 40px;
   }
 }

frontend/tests/location-map-manager.spec.ts

@@ -3508,6 +3508,22 @@ test("viewer can buy selected zone items from the map", async ({ page }) => {
   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");
+  const nextItemButton = page.getByRole("button", { name: "Next item" });
+  const nextItemButtonBox = await nextItemButton.boundingBox();
+  expect(nextItemButtonBox).not.toBeNull();
+  if (!nextItemButtonBox) throw new Error("Map buy next item button was not measurable");
+  expect(nextItemButtonBox.width).toBeGreaterThanOrEqual(40);
+  expect(nextItemButtonBox.height).toBeGreaterThanOrEqual(40);
+  await nextItemButton.click();
+  await expect(page.locator(".confirm-buy-item-name")).toHaveText("sourdough");
+  const previousItemButton = page.getByRole("button", { name: "Previous item" });
+  const previousItemButtonBox = await previousItemButton.boundingBox();
+  expect(previousItemButtonBox).not.toBeNull();
+  if (!previousItemButtonBox) throw new Error("Map buy previous item button was not measurable");
+  expect(previousItemButtonBox.width).toBeGreaterThanOrEqual(40);
+  expect(previousItemButtonBox.height).toBeGreaterThanOrEqual(40);
+  await previousItemButton.click();
+  await expect(page.locator(".confirm-buy-item-name")).toHaveText("french bread");
   await page.getByRole("button", { name: "Mark as Bought" }).click();
 
   await expect.poll(() => boughtPayloads.length).toBe(1);