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 }) => {