diff --git a/frontend/src/components/maps/LocationMapBottomSheetSections.jsx b/frontend/src/components/maps/LocationMapBottomSheetSections.jsx index 1576c1b..3ce01b0 100644 --- a/frontend/src/components/maps/LocationMapBottomSheetSections.jsx +++ b/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 (
@@ -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 (
@@ -214,12 +226,20 @@ export function UnmappedItemsPanel({ {unmappedItemPreview.map((item) => ( ))} - {overflowUnmappedItemCount > 0 ? ( -
  • - +{overflowUnmappedItemCount} more + {hasUnmappedOverflow ? ( +
  • +
  • ) : null} diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css index b092d65..5c6d0fc 100644 --- a/frontend/src/styles/pages/LocationMapManager.css +++ b/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); diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts index c6c58f1..abcb472 100644 --- a/frontend/tests/location-map-manager.spec.ts +++ b/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 }) => {