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>