fix(ui): back recent header only when stuck

packages/ui/src/components/session/sidebar/SidebarActivitySections.tsx

@@ -10,6 +10,7 @@ import {
   resolveMenuOpenSessionId,
 } from './sessionNodeItemUtils';
 import type { SessionNodeRenderExtras } from './sessionNodeItemUtils';
+import { useStickyHeader } from './hooks/useStickyProjectHeaders';
 
 type ActivityItem = {
   node: SessionNode;
@@ -45,6 +46,7 @@ type Props = {
   variant?: 'section' | 'flat';
   initialVisibleCount?: number;
   batchSize?: number;
+  isDesktopShellRuntime: boolean;
 };
 
 type RenderExtras = SessionNodeRenderExtras;
@@ -60,12 +62,17 @@ export function SidebarActivitySections(props: Props): React.ReactNode {
     variant = 'section',
     initialVisibleCount = MAX_VISIBLE_RECENT_SESSIONS,
     batchSize = MAX_VISIBLE_RECENT_SESSIONS,
+    isDesktopShellRuntime,
   } = props;
   const { t } = useI18n();
   const stickyZoneHeaders = useSessionDisplayStore((state) => state.stickyZoneHeaders);
   const [collapsed, setCollapsed] = React.useState<Set<string>>(new Set());
   const [visibleCountBySection, setVisibleCountBySection] = React.useState<Map<string, number>>(new Map());
   const flatVariant = variant === 'flat';
+  const { isStuck: isRecentHeaderStuck, sentinelRef: recentHeaderSentinelRef } = useStickyHeader({
+    enabled: stickyZoneHeaders && !flatVariant,
+    isDesktopShellRuntime,
+  });
 
   const resetSectionLimit = React.useCallback((key: string) => {
     setVisibleCountBySection((prev) => {
@@ -177,11 +184,17 @@ export function SidebarActivitySections(props: Props): React.ReactNode {
 
         return (
           <div key={section.key} className="relative space-y-1">
-            {/* Zone header styled like a project header band; sticky with a
-                solid sidebar backing so rows never show through. */}
+            {/* Zone header styled like a project header band; its solid
+                backing applies only after the header is actually stuck. */}
+            <div
+              ref={recentHeaderSentinelRef}
+              className="absolute top-0 h-px w-full pointer-events-none"
+              aria-hidden="true"
+            />
             <div className={cn(
               '-ml-2.5 -mr-2',
-              stickyZoneHeaders && 'oc-zone-header-backing sticky top-0 z-20 bg-sidebar',
+              stickyZoneHeaders && 'sticky top-0 z-20 bg-sidebar',
+              stickyZoneHeaders && isRecentHeaderStuck && 'oc-zone-header-backing',
             )}>
               <button
                 type="button"