fix(webpub): the column search box must not be scrolled over

It was sticky inside the scrolling list, and the rows went over it: a menu item
carries its own background and its own stacking context, so it wins against a
sticky sibling however high the z-index is raised.

The menu is a flex column now — a header that never scrolls, and the list
scrolling beneath it. Nothing to lose the fight with.
This commit is contained in:
2026-08-11 11:25:52 +02:00
parent 735dfe69db
commit b93c67f3cb
+9 -2
View File
@@ -180,13 +180,19 @@ export function WebPublishPanel() {
<ChevronsUpDown className="size-3.5 opacity-60" /> <ChevronsUpDown className="size-3.5 opacity-60" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-72 max-h-80 overflow-auto"> {/* The search box is OUTSIDE the scrolling area, not sticky inside it.
<div className="p-1.5 sticky top-0 bg-popover z-10"> Sticky kept it in place but the rows scrolled over it: a menu item
carries its own background and its own stacking, so it wins over a
sticky sibling however high its z-index. A header that never
scrolls has nothing to lose the fight with. */}
<DropdownMenuContent align="start" className="w-72 p-0 flex flex-col max-h-80">
<div className="p-1.5 border-b border-border/60 bg-popover shrink-0">
<Input className="h-7 text-xs" placeholder={t('wpub.columnsSearch')} <Input className="h-7 text-xs" placeholder={t('wpub.columnsSearch')}
value={colSearch} value={colSearch}
onChange={(e) => setColSearch(e.target.value)} onChange={(e) => setColSearch(e.target.value)}
onKeyDown={(e) => e.stopPropagation()} /> onKeyDown={(e) => e.stopPropagation()} />
</div> </div>
<div className="overflow-y-auto p-1">
{[...cols] {[...cols]
.sort((a, b) => a.header.localeCompare(b.header)) .sort((a, b) => a.header.localeCompare(b.header))
.filter((c) => { .filter((c) => {
@@ -205,6 +211,7 @@ export function WebPublishPanel() {
<span className="ml-auto pl-2 text-[10px] text-muted-foreground font-mono">{c.group}</span> <span className="ml-auto pl-2 text-[10px] text-muted-foreground font-mono">{c.group}</span>
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>
))} ))}
</div>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
<p className="text-[11px] text-muted-foreground">{t('wpub.columnsHint')}</p> <p className="text-[11px] text-muted-foreground">{t('wpub.columnsHint')}</p>