From df172a452fc492b207bef9701647906dd9877eee Mon Sep 17 00:00:00 2001
From: YSH <devtlin34@gmail.com>
Date: Sat, 20 Dec 2025 02:30:58 -0800
Subject: [PATCH 1/3] fix: toggle item gallery detail on mobile

---
 changelog.md                                  |  2 ++
 item-optimizer/src/components/ItemGallery.tsx | 29 +++++++++++++++++--
 .../components/__tests__/ItemGallery.test.tsx | 29 +++++++++++++++++++
 3 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/changelog.md b/changelog.md
index 729aa5a..232f4ea 100644
--- a/changelog.md
+++ b/changelog.md
@@ -50,3 +50,5 @@
 2025-11-08  move wiki data loading into a built workspace dependency and add provider tests  wiki-data-reader item-optimizer/src/itemDataProvider.ts item-optimizer/src/__tests__
 2025-11-08  add wiki snapshot refresh + parser/update scripts with hero ingestion  wiki-data-reader/scripts wiki-data-reader/snapshots
 2025-11-09  fetch remote item icon URLs from wiki snapshots and remove local PNGs  wiki-data-reader/scripts item-optimizer/src
+
+2025-12-18  add mobile tap-to-toggle detail previews in Item Gallery  item-optimizer/src/components/ItemGallery.tsx
diff --git a/item-optimizer/src/components/ItemGallery.tsx b/item-optimizer/src/components/ItemGallery.tsx
index b1752b6..8f2d5d6 100644
--- a/item-optimizer/src/components/ItemGallery.tsx
+++ b/item-optimizer/src/components/ItemGallery.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo } from "react";
+import { useEffect, useMemo, useState, type MouseEvent } from "react";
 import { useAppDispatch, useAppSelector } from "../hooks";
 import { clearTooltip, setTooltip } from "../slices/tooltipSlice";
 import type { Item, ItemOverride } from "../types";
@@ -27,6 +27,7 @@ interface Props {
 
 export default function ItemGallery({ items, heroes, attrTypes }: Props) {
   const [selected, setSelected] = useState(items[0]);
+  const [, setMobilePreview] = useState<string | null>(null);
   const [editMode, setEditMode] = useState(false);
   const [showSaved, setShowSaved] = useState(false);
   const [savedText, setSavedText] = useState("");
@@ -36,6 +37,30 @@ export default function ItemGallery({ items, heroes, attrTypes }: Props) {
   const dispatch = useAppDispatch();
   const overrideVersion = useAppSelector((s) => s.input.present.overrideVersion);
   const overrides = useMemo(loadLocalOverrides, [overrideVersion]);
+  const isMobile = useMemo(() => {
+    if (typeof window === "undefined") return false;
+    if (window.matchMedia?.("(pointer: coarse)")?.matches) return true;
+    return window.innerWidth < 640;
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      dispatch(clearTooltip());
+    };
+  }, [dispatch]);
+
+  function handleItemClick(it: Item, e: MouseEvent<HTMLButtonElement>) {
+    setSelected(it);
+    if (!isMobile) return;
+    setMobilePreview((current) => {
+      if (current === it.name) {
+        dispatch(clearTooltip());
+        return null;
+      }
+      dispatch(setTooltip({ item: it, x: e.clientX, y: e.clientY }));
+      return it.name;
+    });
+  }
 
   const filtered = items.filter(
     (it) =>
@@ -210,7 +235,7 @@ export default function ItemGallery({ items, heroes, attrTypes }: Props) {
                 <button
                   key={idx}
                   type="button"
-                  onClick={() => setSelected(it)}
+                  onClick={(e) => handleItemClick(it, e)}
                   onMouseEnter={(e) => dispatch(setTooltip({ item: it, x: e.clientX, y: e.clientY }))}
                   onMouseMove={(e) => dispatch(setTooltip({ item: it, x: e.clientX, y: e.clientY }))}
                   onMouseLeave={() => dispatch(clearTooltip())}
diff --git a/item-optimizer/src/components/__tests__/ItemGallery.test.tsx b/item-optimizer/src/components/__tests__/ItemGallery.test.tsx
index 86401d9..1f02f2f 100644
--- a/item-optimizer/src/components/__tests__/ItemGallery.test.tsx
+++ b/item-optimizer/src/components/__tests__/ItemGallery.test.tsx
@@ -1,6 +1,7 @@
 /* @vitest-environment jsdom */
 import "@testing-library/jest-dom";
 import { fireEvent, render, waitFor } from "@testing-library/react";
+import { vi } from "vitest";
 import { Provider } from "react-redux";
 import ItemGallery from "../ItemGallery";
 import store from "../../store";
@@ -124,4 +125,32 @@ describe("ItemGallery", () => {
     fireEvent.click(getByText("Save"));
     expect(localStorage.getItem("localOverrides")).toBe("{}");
   });
+
+  it("toggles tooltip on mobile tap", () => {
+    const originalMatchMedia = window.matchMedia;
+    window.matchMedia = vi.fn().mockImplementation((query) => ({
+      matches: query === "(pointer: coarse)",
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }));
+
+    const { getByText } = render(
+      <Provider store={store}>
+        <ItemGallery items={items} heroes={heroes} attrTypes={attrTypes} />
+      </Provider>,
+    );
+
+    const secondItem = getByText("Two");
+    fireEvent.click(secondItem, { clientX: 10, clientY: 15 });
+    expect(store.getState().tooltip?.item.name).toBe("Two");
+    fireEvent.click(secondItem);
+    expect(store.getState().tooltip).toBeNull();
+
+    window.matchMedia = originalMatchMedia;
+  });
 });

From 2ff0b056e7593f404b5551062bfbfc2cf53e87e5 Mon Sep 17 00:00:00 2001
From: YSH <devtlin34@gmail.com>
Date: Sat, 20 Dec 2025 03:16:57 -0800
Subject: [PATCH 2/3] fix: stabilize mobile tooltip positioning

---
 changelog.md                                  |  1 +
 item-optimizer/src/components/ItemGallery.tsx |  5 ++-
 .../components/__tests__/ItemGallery.test.tsx | 20 +++++++++--
 .../src/utils/__tests__/tooltipUtils.test.ts  | 34 +++++++++++++++++++
 item-optimizer/src/utils/tooltipUtils.ts      |  6 +++-
 5 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 item-optimizer/src/utils/__tests__/tooltipUtils.test.ts

diff --git a/changelog.md b/changelog.md
index 232f4ea..1f93212 100644
--- a/changelog.md
+++ b/changelog.md
@@ -52,3 +52,4 @@
 2025-11-09  fetch remote item icon URLs from wiki snapshots and remove local PNGs  wiki-data-reader/scripts item-optimizer/src
 
 2025-12-18  add mobile tap-to-toggle detail previews in Item Gallery  item-optimizer/src/components/ItemGallery.tsx
+2025-12-19  clamp tooltip position and anchor mobile taps to item bounds  item-optimizer/src/components/ItemGallery.tsx item-optimizer/src/utils/tooltipUtils.ts
diff --git a/item-optimizer/src/components/ItemGallery.tsx b/item-optimizer/src/components/ItemGallery.tsx
index 8f2d5d6..362e40d 100644
--- a/item-optimizer/src/components/ItemGallery.tsx
+++ b/item-optimizer/src/components/ItemGallery.tsx
@@ -52,12 +52,15 @@ export default function ItemGallery({ items, heroes, attrTypes }: Props) {
   function handleItemClick(it: Item, e: MouseEvent<HTMLButtonElement>) {
     setSelected(it);
     if (!isMobile) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const anchorX = rect.left + rect.width / 2;
+    const anchorY = rect.bottom;
     setMobilePreview((current) => {
       if (current === it.name) {
         dispatch(clearTooltip());
         return null;
       }
-      dispatch(setTooltip({ item: it, x: e.clientX, y: e.clientY }));
+      dispatch(setTooltip({ item: it, x: anchorX, y: anchorY }));
       return it.name;
     });
   }
diff --git a/item-optimizer/src/components/__tests__/ItemGallery.test.tsx b/item-optimizer/src/components/__tests__/ItemGallery.test.tsx
index 1f02f2f..801ca79 100644
--- a/item-optimizer/src/components/__tests__/ItemGallery.test.tsx
+++ b/item-optimizer/src/components/__tests__/ItemGallery.test.tsx
@@ -126,7 +126,7 @@ describe("ItemGallery", () => {
     expect(localStorage.getItem("localOverrides")).toBe("{}");
   });
 
-  it("toggles tooltip on mobile tap", () => {
+  it("toggles tooltip on mobile tap and centers tooltip under the item", () => {
     const originalMatchMedia = window.matchMedia;
     window.matchMedia = vi.fn().mockImplementation((query) => ({
       matches: query === "(pointer: coarse)",
@@ -145,9 +145,23 @@ describe("ItemGallery", () => {
       </Provider>,
     );
 
-    const secondItem = getByText("Two");
-    fireEvent.click(secondItem, { clientX: 10, clientY: 15 });
+    const secondItem = getByText("Two").closest("button")!;
+    vi.spyOn(secondItem, "getBoundingClientRect").mockReturnValue({
+      left: 100,
+      right: 150,
+      top: 200,
+      bottom: 240,
+      width: 50,
+      height: 40,
+      x: 100,
+      y: 200,
+      toJSON: () => ({}),
+    });
+
+    fireEvent.click(secondItem);
     expect(store.getState().tooltip?.item.name).toBe("Two");
+    expect(store.getState().tooltip?.x).toBe(125);
+    expect(store.getState().tooltip?.y).toBe(240);
     fireEvent.click(secondItem);
     expect(store.getState().tooltip).toBeNull();
 
diff --git a/item-optimizer/src/utils/__tests__/tooltipUtils.test.ts b/item-optimizer/src/utils/__tests__/tooltipUtils.test.ts
new file mode 100644
index 0000000..af1963c
--- /dev/null
+++ b/item-optimizer/src/utils/__tests__/tooltipUtils.test.ts
@@ -0,0 +1,34 @@
+/* @vitest-environment jsdom */
+import { getTooltipStyle } from "../tooltipUtils";
+
+describe("getTooltipStyle", () => {
+    const originalWidth = Object.getOwnPropertyDescriptor(window, "innerWidth");
+    const originalHeight = Object.getOwnPropertyDescriptor(window, "innerHeight");
+
+    afterEach(() => {
+        if (originalWidth?.get) {
+            Object.defineProperty(window, "innerWidth", originalWidth);
+        }
+        if (originalHeight?.get) {
+            Object.defineProperty(window, "innerHeight", originalHeight);
+        }
+    });
+
+    it("keeps tooltip within viewport when space is limited", () => {
+        Object.defineProperty(window, "innerWidth", { value: 280, configurable: true });
+        Object.defineProperty(window, "innerHeight", { value: 200, configurable: true });
+
+        const style = getTooltipStyle(10, 10, { width: 260, height: 180, offset: 12 });
+        expect(style.left).toBe(12);
+        expect(style.top).toBe(12);
+    });
+
+    it("flips position and clamps to max viewport space", () => {
+        Object.defineProperty(window, "innerWidth", { value: 360, configurable: true });
+        Object.defineProperty(window, "innerHeight", { value: 300, configurable: true });
+
+        const style = getTooltipStyle(350, 280, { width: 200, height: 180, offset: 12 });
+        expect(style.left).toBeLessThanOrEqual(148);
+        expect(style.top).toBeLessThanOrEqual(108);
+    });
+});
diff --git a/item-optimizer/src/utils/tooltipUtils.ts b/item-optimizer/src/utils/tooltipUtils.ts
index 0502538..45e93ee 100644
--- a/item-optimizer/src/utils/tooltipUtils.ts
+++ b/item-optimizer/src/utils/tooltipUtils.ts
@@ -13,7 +13,7 @@ export interface TooltipStyleOptions {
 export function getTooltipStyle(
     x: number,
     y: number,
-    options: TooltipStyleOptions = {}
+    options: TooltipStyleOptions = {},
 ): React.CSSProperties {
     const winW = window.innerWidth;
     const winH = window.innerHeight;
@@ -28,6 +28,10 @@ export function getTooltipStyle(
     if (top + TOOLTIP_HEIGHT > winH) {
         top = y - TOOLTIP_HEIGHT - OFFSET;
     }
+    const maxLeft = Math.max(OFFSET, winW - TOOLTIP_WIDTH - OFFSET);
+    const maxTop = Math.max(OFFSET, winH - TOOLTIP_HEIGHT - OFFSET);
+    left = Math.min(Math.max(left, OFFSET), maxLeft);
+    top = Math.min(Math.max(top, OFFSET), maxTop);
     return {
         left,
         top,

From 74ffffdfa020bb10c4e83eccca1baca152cbe6f1 Mon Sep 17 00:00:00 2001
From: YSH <devtlin34@gmail.com>
Date: Sat, 20 Dec 2025 15:16:47 -0800
Subject: [PATCH 3/3] fix: keep mobile gallery detail sticky

---
 changelog.md                                  |  1 +
 item-optimizer/src/components/ItemGallery.tsx | 43 +++++++++++--------
 .../components/__tests__/ItemGallery.test.tsx | 24 +++--------
 3 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/changelog.md b/changelog.md
index 1f93212..68b88da 100644
--- a/changelog.md
+++ b/changelog.md
@@ -53,3 +53,4 @@
 
 2025-12-18  add mobile tap-to-toggle detail previews in Item Gallery  item-optimizer/src/components/ItemGallery.tsx
 2025-12-19  clamp tooltip position and anchor mobile taps to item bounds  item-optimizer/src/components/ItemGallery.tsx item-optimizer/src/utils/tooltipUtils.ts
+2025-12-20  keep Item Gallery detail sticky on mobile and disable tooltip taps  item-optimizer/src/components/ItemGallery.tsx
diff --git a/item-optimizer/src/components/ItemGallery.tsx b/item-optimizer/src/components/ItemGallery.tsx
index 362e40d..da3a2c5 100644
--- a/item-optimizer/src/components/ItemGallery.tsx
+++ b/item-optimizer/src/components/ItemGallery.tsx
@@ -27,7 +27,6 @@ interface Props {
 
 export default function ItemGallery({ items, heroes, attrTypes }: Props) {
   const [selected, setSelected] = useState(items[0]);
-  const [, setMobilePreview] = useState<string | null>(null);
   const [editMode, setEditMode] = useState(false);
   const [showSaved, setShowSaved] = useState(false);
   const [savedText, setSavedText] = useState("");
@@ -49,20 +48,11 @@ export default function ItemGallery({ items, heroes, attrTypes }: Props) {
     };
   }, [dispatch]);
 
-  function handleItemClick(it: Item, e: MouseEvent<HTMLButtonElement>) {
+  function handleItemClick(it: Item) {
     setSelected(it);
-    if (!isMobile) return;
-    const rect = e.currentTarget.getBoundingClientRect();
-    const anchorX = rect.left + rect.width / 2;
-    const anchorY = rect.bottom;
-    setMobilePreview((current) => {
-      if (current === it.name) {
-        dispatch(clearTooltip());
-        return null;
-      }
-      dispatch(setTooltip({ item: it, x: anchorX, y: anchorY }));
-      return it.name;
-    });
+    if (isMobile) {
+      dispatch(clearTooltip());
+    }
   }
 
   const filtered = items.filter(
@@ -75,7 +65,12 @@ export default function ItemGallery({ items, heroes, attrTypes }: Props) {
     <div className="glass-card space-y-6 rounded-xl shadow-lg p-4 sm:p-6 bg-white dark:bg-gray-800 dark:border-gray-700">
       <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 sm:text-3xl">Configuration</h2>
       <div className="relative">
-        <div>
+        <div
+          className={`space-y-2 ${
+            isMobile ? "sticky top-0 z-10 bg-white dark:bg-gray-800 pb-4" : ""
+          }`}
+          data-testid="item-detail-panel"
+        >
           {selected && (
             <div className="space-y-2">
               <div className="space-y-1">
@@ -238,10 +233,20 @@ export default function ItemGallery({ items, heroes, attrTypes }: Props) {
                 <button
                   key={idx}
                   type="button"
-                  onClick={(e) => handleItemClick(it, e)}
-                  onMouseEnter={(e) => dispatch(setTooltip({ item: it, x: e.clientX, y: e.clientY }))}
-                  onMouseMove={(e) => dispatch(setTooltip({ item: it, x: e.clientX, y: e.clientY }))}
-                  onMouseLeave={() => dispatch(clearTooltip())}
+                  onClick={() => handleItemClick(it)}
+                  onMouseEnter={
+                    isMobile
+                      ? undefined
+                      : (e: MouseEvent<HTMLButtonElement>) =>
+                          dispatch(setTooltip({ item: it, x: e.clientX, y: e.clientY }))
+                  }
+                  onMouseMove={
+                    isMobile
+                      ? undefined
+                      : (e: MouseEvent<HTMLButtonElement>) =>
+                          dispatch(setTooltip({ item: it, x: e.clientX, y: e.clientY }))
+                  }
+                  onMouseLeave={isMobile ? undefined : () => dispatch(clearTooltip())}
                   className="relative flex flex-col items-center gap-1 p-2 rounded border dark:border-gray-700 bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800"
                 >
                   {overrides[it.name] && (
diff --git a/item-optimizer/src/components/__tests__/ItemGallery.test.tsx b/item-optimizer/src/components/__tests__/ItemGallery.test.tsx
index 801ca79..46c2ddf 100644
--- a/item-optimizer/src/components/__tests__/ItemGallery.test.tsx
+++ b/item-optimizer/src/components/__tests__/ItemGallery.test.tsx
@@ -126,7 +126,7 @@ describe("ItemGallery", () => {
     expect(localStorage.getItem("localOverrides")).toBe("{}");
   });
 
-  it("toggles tooltip on mobile tap and centers tooltip under the item", () => {
+  it("keeps the detail panel sticky on mobile and avoids tooltip taps", () => {
     const originalMatchMedia = window.matchMedia;
     window.matchMedia = vi.fn().mockImplementation((query) => ({
       matches: query === "(pointer: coarse)",
@@ -139,31 +139,19 @@ describe("ItemGallery", () => {
       dispatchEvent: vi.fn(),
     }));
 
-    const { getByText } = render(
+    const { getByText, getByTestId } = render(
       <Provider store={store}>
         <ItemGallery items={items} heroes={heroes} attrTypes={attrTypes} />
       </Provider>,
     );
 
-    const secondItem = getByText("Two").closest("button")!;
-    vi.spyOn(secondItem, "getBoundingClientRect").mockReturnValue({
-      left: 100,
-      right: 150,
-      top: 200,
-      bottom: 240,
-      width: 50,
-      height: 40,
-      x: 100,
-      y: 200,
-      toJSON: () => ({}),
-    });
+    expect(getByTestId("item-detail-panel")).toHaveClass("sticky");
 
+    const secondItem = getByText("Two").closest("button")!;
     fireEvent.click(secondItem);
-    expect(store.getState().tooltip?.item.name).toBe("Two");
-    expect(store.getState().tooltip?.x).toBe(125);
-    expect(store.getState().tooltip?.y).toBe(240);
-    fireEvent.click(secondItem);
+
     expect(store.getState().tooltip).toBeNull();
+    expect(getByText("ability")).toBeInTheDocument();
 
     window.matchMedia = originalMatchMedia;
   });