Sticky headers for collapsable panels

Differential Revision: D64938295

fbshipit-source-id: 0a646f29eba98e1721616263960abf061b7e3304

desktop/flipper-plugin/src/ui/Panel.tsx

@@ -13,9 +13,17 @@ import {TrackingScope} from './Tracked';
 import {useLocalStorageState} from '../utils/useLocalStorageState';
 import {useCallback} from 'react';
 import styled from '@emotion/styled';
+import {css} from '@emotion/css';
 import {Spacing, theme} from './theme';
 import {Layout} from './Layout';
 
+const stickyHeader = css`
+  & .ant-collapse-header {
+    position: sticky !important;
+    top: 0;
+  }
+`;
+
 export const Panel: React.FC<{
   title: string;
   /**
@@ -28,6 +36,7 @@ export const Panel: React.FC<{
   collapsed?: boolean;
   pad?: Spacing;
   gap?: Spacing;
+  stickyHeader?: boolean;
   extraActions?: React.ReactElement | null;
   className?: string;
 }> = (props) => {
@@ -52,6 +61,7 @@ export const Panel: React.FC<{
         onChange={toggle}>
         <Collapse.Panel
           key={props.title}
+          className={props.stickyHeader ? stickyHeader : undefined}
           header={
             props.extraActions ? (
               <Layout.Right center>