From b93c67f3cbd26c043ac29c496dcd42a06625cda7 Mon Sep 17 00:00:00 2001
From: Gregory Salaun <legreg002@hotmail.com>
Date: Tue, 11 Aug 2026 11:25:52 +0200
Subject: [PATCH] fix(webpub): the column search box must not be scrolled over
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 frontend/src/components/WebPublishPanel.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/WebPublishPanel.tsx b/frontend/src/components/WebPublishPanel.tsx
index cd51857..d769e6f 100644
--- a/frontend/src/components/WebPublishPanel.tsx
+++ b/frontend/src/components/WebPublishPanel.tsx
@@ -180,13 +180,19 @@ export function WebPublishPanel() {
                 <ChevronsUpDown className="size-3.5 opacity-60" />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="w-72 max-h-80 overflow-auto">
-              <div className="p-1.5 sticky top-0 bg-popover z-10">
+            {/* The search box is OUTSIDE the scrolling area, not sticky inside it.
+                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')}
                   value={colSearch}
                   onChange={(e) => setColSearch(e.target.value)}
                   onKeyDown={(e) => e.stopPropagation()} />
               </div>
+              <div className="overflow-y-auto p-1">
               {[...cols]
                 .sort((a, b) => a.header.localeCompare(b.header))
                 .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>
                   </DropdownMenuCheckboxItem>
                 ))}
+              </div>
             </DropdownMenuContent>
           </DropdownMenu>
           <p className="text-[11px] text-muted-foreground">{t('wpub.columnsHint')}</p>