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() {