From 3259009690056c40bc47031ad64a1f1a2f73aa53 Mon Sep 17 00:00:00 2001 From: SJCoetz Date: Sun, 2 Aug 2026 22:42:40 +0200 Subject: [PATCH] feat: shrink PO/Notes buttons, lift popover stacking, responsive header - PO (FileText) and Notes (MessageSquare) inline buttons: w-7 h-7 / w-8 h-8 -> w-6 h-6 with size 11 icons and tighter radius, plus narrower right column gap so the smaller buttons don't sit in stale spacing. - Popover z-index vs next group: add onPopoverChange callback to CollectionItemCard so SupplierGroup / AreaGroup can lift their section from z-10 to z-30 when *any* popover inside is open. Covers both compact (own popover) and detailed (card popover) modes. Active
  • in compact mode also lifts to z-30 so popover paints above sibling rows in the same list. - Header categories on small screens: stats + toggle row now flex-wraps so chips don't overflow; added xs (480px) breakpoint and hid Supplier/Area labels below it to keep tiny phones clean. Status filter chip row already scrolls horizontally. Co-Authored-By: Claude Co-authored-by: Orca --- app/page.tsx | 19 +++++++++----- components/AreaGroup.tsx | 16 ++++++++++-- components/CollectionItemCard.tsx | 31 +++++++++++++++------- components/SupplierGroup.tsx | 43 ++++++++++++++++++++++--------- tailwind.config.js | 9 +++++++ 5 files changed, 87 insertions(+), 31 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 852fa83..5d4582f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -422,9 +422,11 @@ const loadItems = useCallback(async (showLoading = true) => { - {/* Stats + Controls bar */} -
    -
    + {/* Stats + Controls bar — wraps onto two lines on narrow viewports + so the stat chips don't collide with the toggle groups. On + ≥640px everything fits on one line again. */} +
    +
    - {/* View toggle */} -
    + {/* View toggle — buttons stay icon-only on the smallest screens + (label hidden at {/* Group mode toggle */}
    {
    diff --git a/components/AreaGroup.tsx b/components/AreaGroup.tsx index 7b9dd1e..22b3054 100644 --- a/components/AreaGroup.tsx +++ b/components/AreaGroup.tsx @@ -1,5 +1,6 @@ 'use client'; +import { useState } from 'react'; import { OrderItem } from '@/lib/types'; import { cn } from '@/lib/utils'; import CollectionItemCard from '@/components/CollectionItemCard'; @@ -72,13 +73,23 @@ export default function AreaGroup({ const hasCoords = center.latitude !== 0 && center.longitude !== 0; + // Tracks whether any detailed-mode CollectionItemCard inside has + // an open popover. We use this to lift the section's stacking + // context so the popover paints above the next area group. + const [childPopoverOpen, setChildPopoverOpen] = useState(false); + return (
    @@ -218,6 +229,7 @@ export default function AreaGroup({ onProblem={onProblem} onNavigate={onNavigate} onShowDetails={onShowDetails} + onPopoverChange={setChildPopoverOpen} /> ))}
    diff --git a/components/CollectionItemCard.tsx b/components/CollectionItemCard.tsx index ffb3b1b..9b2b37f 100644 --- a/components/CollectionItemCard.tsx +++ b/components/CollectionItemCard.tsx @@ -31,6 +31,10 @@ interface CollectionItemProps { onNavigate: (lat: number, lng: number, name: string) => void; // Opens the ItemDetailModal showing PO document + buyer notes onShowDetails: (item: OrderItem) => void; + // Notifies the parent that a popover has opened/closed so it can + // lift its own stacking layer — the card's z-30 alone can't escape + // the section's stacking context, so the section needs to know. + onPopoverChange?: (open: boolean) => void; } function getItemType(item: OrderItem): { @@ -113,6 +117,7 @@ export default function CollectionItemCard({ onProblem, onNavigate, onShowDetails, + onPopoverChange, }: CollectionItemProps) { const [expanded, setExpanded] = useState(false); const [showNotesTooltip, setShowNotesTooltip] = useState(false); @@ -122,6 +127,13 @@ export default function CollectionItemCard({ useClickOutside(notesTooltipRef, () => setShowNotesTooltip(false)); useClickOutside(poTooltipRef, () => setShowPoTooltip(false)); + // Bubble the open/close state up so the wrapping supplier/area + // group can lift itself above the *next* group in the list. + const popoverOpen = showNotesTooltip || showPoTooltip; + useEffect(() => { + onPopoverChange?.(popoverOpen); + }, [popoverOpen, onPopoverChange]); + const supplier = item.expand?.supplier; const itemType = getItemType(item); const coords = parseCoordinates(supplier?.coordinates); @@ -141,8 +153,9 @@ export default function CollectionItemCard({
    @@ -254,16 +267,15 @@ export default function CollectionItemCard({ onClick={(e) => { e.stopPropagation(); setShowPoTooltip(v => !v); setShowNotesTooltip(false); }} aria-label="Show PO details" aria-expanded={showPoTooltip} - className="w-7 h-7 rounded-lg flex items-center justify-center bg-[#6c5a99] text-white active:bg-[#4a3d6b] transition-colors" + className="w-6 h-6 rounded-md flex items-center justify-center bg-[#6c5a99] text-white active:bg-[#4a3d6b] transition-colors" > -