Update table styles

webview/src/experiments/components/table/Table.tsx

@@ -21,6 +21,7 @@ export const Table: React.FC<InstanceProp> = ({ instance }) => {
   const { clearSelectedRows, batchSelection, lastSelectedRow } =
     React.useContext(RowSelectionContext)
   const [expColumnNeedsShadow, setExpColumnNeedsShadow] = useState(false)
+  const [tableHeadHeight, setTableHeadHeight] = useState(55)
 
   const tableRef = useRef<HTMLDivElement>(null)
 
@@ -81,9 +82,12 @@ export const Table: React.FC<InstanceProp> = ({ instance }) => {
           instance={instance}
           root={tableRef.current}
           setExpColumnNeedsShadow={setExpColumnNeedsShadow}
+          setTableHeadHeight={setTableHeadHeight}
         />
         {rows.map(row => (
           <TableBody
+            tableHeaderHeight={tableHeadHeight}
+            root={tableRef.current}
             row={row}
             instance={instance}
             key={row.id}

webview/src/experiments/components/table/TableBody.tsx

@@ -1,33 +1,61 @@
-import React from 'react'
+import React, { CSSProperties } from 'react'
 import cx from 'classnames'
+import { useInView } from 'react-intersection-observer'
 import styles from './styles.module.scss'
 import { BatchSelectionProp, RowContent } from './Row'
 import { InstanceProp, RowProp } from './interfaces'
 import { ExperimentGroup } from './ExperimentGroup'
 
-export const TableBody: React.FC<
-  RowProp & InstanceProp & BatchSelectionProp
-> = ({
-  row,
-  instance,
-  contextMenuDisabled,
-  projectHasCheckpoints,
-  hasRunningExperiment,
-  batchRowSelection
-}) => {
-  instance.prepareRow(row)
+const WorkspaceRowGroupWrapper: React.FC<
+  {
+    children: React.ReactNode
+    root: HTMLElement | null
+    tableHeaderHeight: number
+  } & InstanceProp
+> = ({ children, instance, root, tableHeaderHeight }) => {
+  const [ref, needsShadow] = useInView({
+    root,
+    rootMargin: `-${tableHeaderHeight + 15}px 0px 0px 0px`,
+    threshold: 1
+  })
+
   return (
     <div
+      style={
+        { '--table-head-height': `${tableHeaderHeight}px` } as CSSProperties
+      }
+      ref={ref}
       {...instance.getTableBodyProps({
         className: cx(
           styles.rowGroup,
           styles.tbody,
-          row.values.id === 'workspace'
-            ? styles.workspaceRowGroup
-            : styles.normalRowGroup
+          styles.workspaceRowGroup,
+          needsShadow && styles.withShadow
         )
       })}
     >
+      {children}
+    </div>
+  )
+}
+export const TableBody: React.FC<
+  RowProp &
+    InstanceProp &
+    BatchSelectionProp & { root: HTMLElement | null; tableHeaderHeight: number }
+> = ({
+  row,
+  instance,
+  contextMenuDisabled,
+  projectHasCheckpoints,
+  hasRunningExperiment,
+  batchRowSelection,
+  root,
+  tableHeaderHeight
+}) => {
+  instance.prepareRow(row)
+
+  const content = (
+    <>
       <RowContent
         row={row}
         projectHasCheckpoints={projectHasCheckpoints}
@@ -47,6 +75,23 @@ export const TableBody: React.FC<
             batchRowSelection={batchRowSelection}
           />
         ))}
+    </>
+  )
+  return row.values.id === 'workspace' ? (
+    <WorkspaceRowGroupWrapper
+      tableHeaderHeight={tableHeaderHeight}
+      root={root}
+      instance={instance}
+    >
+      {content}
+    </WorkspaceRowGroupWrapper>
+  ) : (
+    <div
+      {...instance.getTableBodyProps({
+        className: cx(styles.rowGroup, styles.tbody, styles.normalRowGroup)
+      })}
+    >
+      {content}
     </div>
   )
 }

webview/src/experiments/components/table/TableHead.tsx

@@ -1,10 +1,8 @@
 import { Experiment } from 'dvc/src/experiments/webview/contract'
-import cx from 'classnames'
-import React, { DragEvent, useRef } from 'react'
+import React, { DragEvent, useRef, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 import { HeaderGroup, TableInstance } from 'react-table'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
-import { useInView } from 'react-intersection-observer'
 import styles from './styles.module.scss'
 import { MergedHeaderGroups } from './MergeHeaderGroups'
 import { Indicators } from './Indicators'
@@ -18,6 +16,7 @@ interface TableHeadProps {
   instance: TableInstance<Experiment>
   root: HTMLElement | null
   setExpColumnNeedsShadow: (needsShadow: boolean) => void
+  setTableHeadHeight: (height: number) => void
 }
 
 export const TableHead = ({
@@ -29,7 +28,8 @@ export const TableHead = ({
     rows
   },
   root,
-  setExpColumnNeedsShadow
+  setExpColumnNeedsShadow,
+  setTableHeadHeight
 }: TableHeadProps) => {
   const columns = useSelector(
     (state: ExperimentsState) => state.tableData.columns
@@ -42,6 +42,14 @@ export const TableHead = ({
 
   const fullColumnOrder = useRef<string[]>()
   const draggingIds = useRef<string[]>()
+  const wrapper = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const wrapperHeight = wrapper.current?.getBoundingClientRect().height
+    if (wrapperHeight) {
+      setTableHeadHeight(wrapperHeight)
+    }
+  }, [setTableHeadHeight])
 
   const onDragStart: DragFunction = ({ currentTarget }) => {
     const displacerHeader = allHeaders.find(
@@ -86,21 +94,13 @@ export const TableHead = ({
       type: MessageFromWebviewType.REORDER_COLUMNS
     })
   }
-  const [ref, needsShadow] = useInView({
-    root,
-    rootMargin: '-15px 0px 0px 0px',
-    threshold: 1
-  })
 
   const selectedForPlotsCount = getSelectedForPlotsCount(rows)
 
   const firstExpColumnCellId = headerGroups[0].headers[0].id
 
   return (
-    <div
-      className={cx(styles.thead, needsShadow && styles.headWithShadow)}
-      ref={ref}
-    >
+    <div className={styles.thead} ref={wrapper}>
       <Indicators selectedForPlotsCount={selectedForPlotsCount} />
       {headerGroups.map(headerGroup => (
         // eslint-disable-next-line react/jsx-key