fix: expand long unmapped map lists

frontend/src/components/maps/LocationMapBottomSheetSections.jsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { objectZoneId } from "../../lib/locationMapUtils";
 
 export const MAP_DISPLAY_CONTROLS = [
@@ -184,6 +185,14 @@ export function UnmappedItemsPanel({
   onShowUnmappedItems,
   onSelectUnmappedItem,
 }) {
+  const [showAllUnmappedItems, setShowAllUnmappedItems] = useState(false);
+
+  useEffect(() => {
+    if (visibleUnmappedItems.length <= UNMAPPED_PREVIEW_LIMIT) {
+      setShowAllUnmappedItems(false);
+    }
+  }, [visibleUnmappedItems.length]);
+
   if (visibleUnmappedItems.length === 0 && hasHiddenUnmappedItems) {
     return (
       <div className="location-map-unmapped-list">
@@ -204,8 +213,11 @@ export function UnmappedItemsPanel({
     return null;
   }
 
-  const unmappedItemPreview = visibleUnmappedItems.slice(0, UNMAPPED_PREVIEW_LIMIT);
+  const unmappedItemPreview = showAllUnmappedItems
+    ? visibleUnmappedItems
+    : visibleUnmappedItems.slice(0, UNMAPPED_PREVIEW_LIMIT);
   const overflowUnmappedItemCount = visibleUnmappedItems.length - unmappedItemPreview.length;
+  const hasUnmappedOverflow = visibleUnmappedItems.length > UNMAPPED_PREVIEW_LIMIT;
 
   return (
     <div className="location-map-unmapped-list">
@@ -214,12 +226,20 @@ export function UnmappedItemsPanel({
         {unmappedItemPreview.map((item) => (
           <MapItemActionRow key={item.id} item={item} onSelectItem={onSelectUnmappedItem} />
         ))}
-        {overflowUnmappedItemCount > 0 ? (
+        {hasUnmappedOverflow ? (
-          <li
+          <li className="location-map-unmapped-more">
-            className="location-map-unmapped-more"
+            <button
-            aria-label={`${overflowUnmappedItemCount} more unmapped items`}
+              type="button"
-          >
+              className="location-map-list-more-button"
-            +{overflowUnmappedItemCount} more
+              onClick={() => setShowAllUnmappedItems((current) => !current)}
+              aria-label={
+                showAllUnmappedItems
+                  ? "Show fewer unmapped items"
+                  : `Show ${overflowUnmappedItemCount} more unmapped items`
+              }
+            >
+              {showAllUnmappedItems ? "Show fewer" : `+${overflowUnmappedItemCount} more`}
+            </button>
           </li>
         ) : null}
       </ul>

frontend/src/styles/pages/LocationMapManager.css

@@ -828,12 +828,31 @@
 }
 
 .location-map-unmapped-list .location-map-unmapped-more {
-  justify-content: center;
+  padding: 0;
+  overflow: hidden;
   border-style: dashed;
   color: #bfdbfe;
   font-weight: 800;
 }
 
+.location-map-list-more-button {
+  width: 100%;
+  min-height: 34px;
+  padding: 0.35rem 0.55rem;
+  border: 0;
+  background: transparent;
+  color: #bfdbfe;
+  font: inherit;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.location-map-list-more-button:hover,
+.location-map-list-more-button:focus-visible {
+  outline: none;
+  background: rgba(96, 165, 250, 0.14);
+}
+
 .location-map-setup {
   align-self: center;
   width: min(100% - 1.5rem, 560px);

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

@@ -2127,7 +2127,17 @@ test("viewer shows a compact overflow cue for long unmapped lists", async ({ pag
   await expect(page.getByText("unmapped item 1")).toBeVisible();
   await expect(page.getByText("unmapped item 8")).toBeVisible();
   await expect(page.getByText("unmapped item 9")).toHaveCount(0);
-  await expect(page.getByLabel("3 more unmapped items")).toHaveText("+3 more");
+  await expect(page.getByRole("button", { name: "Show 3 more unmapped items" })).toHaveText("+3 more");
+
+  await page.getByRole("button", { name: "Show 3 more unmapped items" }).click();
+
+  await expect(page.getByText("unmapped item 9")).toBeVisible();
+  await expect(page.getByText("unmapped item 11")).toBeVisible();
+  await expect(page.getByRole("button", { name: "Show fewer unmapped items" })).toHaveText("Show fewer");
+
+  await page.getByRole("button", { name: "Show fewer unmapped items" }).click();
+
+  await expect(page.getByText("unmapped item 9")).toHaveCount(0);
 });
 
 test("viewer can buy unmapped map items in place", async ({ page }) => {