[Feature][UI] Implement Sticky Kernel Selector in Overview

[FindHao]

This pull request introduces a significant UI/UX enhancement to the KernelOverview page by implementing a sticky/floating header for the "Available Kernels" selector. This feature improves usability, especially on pages with many kernels, by ensuring the kernel selection controls are always accessible.

Key Features and Changes:

1. Sticky by Default: The "Available Kernels" section now sticks to the top of the viewport by default as the user scrolls down the page.
2. User-Controlled Toggle: A toggle switch has been added next to the "Available Kernels" title, allowing users to enable or disable the sticky functionality as needed.
3. Smart Collapsing:
   • To conserve screen space, the sticky header automatically collapses to show only the first row. This preserves the context of adjacent kernels, which was a key part of the feedback during development.
   • When the user hovers over the collapsed bar, it smoothly expands to show all available kernels.
4. Compact Sticky Design: When in the sticky state, the entire header becomes more compact:
   • The "Available Kernels" title text is smaller.
   • The kernel selection buttons and the gaps between them are reduced in size.
   • Overall padding and margins are tightened.
5. Robust and Responsive: The component is fully responsive. It uses a useLayoutEffect hook to track the positions of the kernel buttons and correctly scrolls the active row into view. A resize event listener ensures this logic re-runs if the browser window is resized, so the correct row is always shown.

Implementation Details:

• A new reusable ToggleSwitch.tsx component was created.
• The logic is self-contained within KernelOverview.tsx, using React hooks (useState, useRef, useCallback, useLayoutEffect) for state management and DOM interaction.
• Styling is handled with conditional Tailwind CSS classes to ensure a smooth transition between states.

Default sticky and collapsed view:

Expanded view on hover:

[facebook-github-bot]

@FindHao has imported this pull request. If you are a Meta employee, you can view this in D78920093.

[facebook-github-bot]

@FindHao has imported this pull request. If you are a Meta employee, you can view this in D78920093.

[facebook-github-bot]

@FindHao has imported this pull request. If you are a Meta employee, you can view this in D78920093.

[facebook-github-bot]

@FindHao merged this pull request in 267678d.