mirror of
https://github.com/Crosstalk-Solutions/project-nomad.git
synced 2026-10-17 13:19:18 +02:00
20f65c06fc
Dropping w-72 when the picker was rewritten left the absolutely positioned popover to shrink-wrap its content. The six 1fr columns collapsed to a few pixels each and the 18px glyphs overflowed and overlapped, so the grid rendered as a smear. Restored the explicit width, added shrink-0 to the cells so a narrow container can never squash them again, and centred them in their tracks. Caught by looking at it. The DOM assertions I had run -- 36 buttons in a grid-cols-6 -- all passed while the thing was visually broken, which is the whole reason a frontend change needs eyes on it and not just a query. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01F8Mgg1vd2eKSs8StZiuyMV
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { MARKER_ICONS } from './marker_icons'
|
|
|
|
type IconSelectorPopoverProps = {
|
|
selectedIcon?: string | null
|
|
onSelect: (iconName: string) => void
|
|
onClose: () => void
|
|
}
|
|
|
|
/**
|
|
* The marker icon picker: the whole curated set, six across and six down.
|
|
*
|
|
* No search box and no paging, because there is nothing to search or page
|
|
* through -- 36 icons fit on screen at once, which is the point of curating
|
|
* them. See marker_icons.ts for why the set is a hand-written list.
|
|
*/
|
|
export default function IconSelectorPopover({
|
|
selectedIcon,
|
|
onSelect,
|
|
onClose,
|
|
}: IconSelectorPopoverProps) {
|
|
return (
|
|
<div
|
|
className="absolute left-0 top-7 z-50 w-72 rounded-md border border-border-subtle bg-surface-primary p-2 shadow-lg"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onMouseDown={(e) => e.stopPropagation()}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="grid grid-cols-6 justify-items-center gap-1">
|
|
{MARKER_ICONS.map(({ name, label, Icon }) => (
|
|
<button
|
|
key={name}
|
|
type="button"
|
|
title={label}
|
|
aria-label={label}
|
|
onClick={() => {
|
|
onSelect(name)
|
|
onClose()
|
|
}}
|
|
className={`flex h-8 w-8 shrink-0 items-center justify-center rounded transition-colors hover:bg-surface-secondary ${
|
|
selectedIcon === name ? 'bg-desert-green text-white' : 'text-text-secondary'
|
|
}`}
|
|
>
|
|
<Icon size={18} />
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-2 flex justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="rounded bg-[#424420] px-2 py-1 text-xs text-white hover:bg-[#525530]"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|