frontend/src/hooks/useLocationMapViewControls.js

@@ -125,6 +125,7 @@ export default function useLocationMapViewControls({
       Math.min(availableWidth / mapSize.width, availableHeight / mapSize.height)
     );
     setZoom(Number(nextZoom.toFixed(2)));
+    scrollElement?.scrollTo({ left: 0, top: 0 });
   }, [mapSize.height, mapSize.width, setZoom, svgRef]);
 
   return {

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

@@ -3052,6 +3052,18 @@ test("mobile fit zoom fits the map into the visible canvas", async ({ page }) =>
   });
 
   await page.goto("/stores/100/locations/10/map");
+  const scroll = page.locator(".location-map-scroll");
+  await scroll.evaluate((element) => {
+    element.scrollLeft = 320;
+    element.scrollTop = 240;
+  });
+  const pannedScroll = await scroll.evaluate((element) => ({
+    left: element.scrollLeft,
+    top: element.scrollTop,
+  }));
+  expect(pannedScroll.left).toBeGreaterThan(0);
+  expect(pannedScroll.top).toBeGreaterThan(0);
+
   await page.getByRole("button", { name: "Fit" }).click();
 
   const zoomText = page.locator(".location-map-zoom-controls span");
@@ -3067,6 +3079,10 @@ test("mobile fit zoom fits the map into the visible canvas", async ({ page }) =>
   if (!scrollBox || !svgBox) throw new Error("Mobile fitted map was not measurable");
   expect(svgBox.width).toBeLessThanOrEqual(scrollBox.width + 1);
   expect(svgBox.height).toBeLessThanOrEqual(scrollBox.height + 1);
+  await expect.poll(async () => scroll.evaluate((element) => ({
+    left: element.scrollLeft,
+    top: element.scrollTop,
+  }))).toEqual({ left: 0, top: 0 });
 });
 
 test("zoom controls disable at map zoom limits", async ({ page }) => {