diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx index 9e2cf81ce..f9de99020 100644 --- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx +++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx @@ -731,6 +731,13 @@ export default function SidebarLayout(props: { children?: React.ReactNode }) { WebkitMaskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)', }} /> + {/* Opaque underlay for dark mode. Table/page content scrolls under this sticky + header; without a solid base, the translucent fill + backdrop-filter composite + a bright seam along the bottom edge whenever rows pass behind it. */} +
{/* Left section: Logo + Menu + Project Switcher */}
diff --git a/apps/dashboard/src/components/cmdk-search.tsx b/apps/dashboard/src/components/cmdk-search.tsx index 300098eb3..22b98ccbd 100644 --- a/apps/dashboard/src/components/cmdk-search.tsx +++ b/apps/dashboard/src/components/cmdk-search.tsx @@ -1005,20 +1005,21 @@ export function CmdKSearch({ // Trigger button component that can be placed in the header export function CmdKTrigger() { const mouseCursorRef = useRef(null); - const mouseCursorParentRef = useRef(null); const modifierKeyLabel = getShortcutModifierKeyLabel(); - useEffect(() => { - const handleMouseMove = (e: MouseEvent) => { - if (mouseCursorRef.current && mouseCursorParentRef.current) { - const rect = mouseCursorParentRef.current.getBoundingClientRect(); - mouseCursorRef.current.style.left = `${e.clientX - rect.left}px`; - mouseCursorRef.current.style.top = `${e.clientY - rect.top}px`; - mouseCursorRef.current.style.display = "block"; - } - }; - document.addEventListener("mousemove", handleMouseMove); - return () => document.removeEventListener("mousemove", handleMouseMove); + const handleMouseMove = useCallback((event: React.MouseEvent) => { + const cursor = mouseCursorRef.current; + if (cursor == null) { + return; + } + + // Keep this glow local to the trigger. A document-level mousemove listener used to + // reposition a blurred layer under the translucent header on every cursor move across + // the page, continuously recompositing the sticky header while table rows scrolled + // behind it and making the header's bottom edge flicker. + const rect = event.currentTarget.getBoundingClientRect(); + cursor.style.left = `${event.clientX - rect.left}px`; + cursor.style.top = `${event.clientY - rect.top}px`; }, []); return ( @@ -1026,6 +1027,7 @@ export function CmdKTrigger() {