Improve sidebar positioning in evaluation logs and document logs (#550)

Now when you scroll the logs table the top of the open log info panel is
lost. With this change the panel is always visible and also have inner
scroll

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/MetadataInfoTabs/index.tsx

@@ -1,41 +1,48 @@
-import { ReactNode, useState } from 'react'
+import { forwardRef, ReactNode, useState } from 'react'
 
 import { cn, TabSelector, TabSelectorOption } from '@latitude-data/web-ui'
 
 type RenderProps = { selectedTab: string }
-export function MetadataInfoTabs({
-  className,
-  tabs = [
-    { label: 'Metadata', value: 'metadata' },
-    { label: 'Messages', value: 'messages' },
-  ],
-  children,
-}: {
+type Props = {
   children: (args: RenderProps) => ReactNode
   tabs?: TabSelectorOption<string>[]
   className?: string
-}) {
-  const [selectedTab, setSelectedTab] = useState<string>('metadata')
-  return (
-    <div
-      className={cn(
-        'flex-shrink-0 flex flex-col',
-        'border border-border rounded-lg items-center',
-        className,
-      )}
-    >
-      <div className='pt-6'>
-        <TabSelector
-          options={tabs}
-          selected={selectedTab}
-          onSelect={setSelectedTab}
-        />
-      </div>
-      <div className='my-5 px-4 flex flex-col gap-y-5 relative w-full'>
-        <div className='flex flex-col gap-4 w-full overflow-x-auto'>
-          {children({ selectedTab })}
+}
+export const MetadataInfoTabs = forwardRef<HTMLDivElement, Props>(
+  function MetadataInfoTabs(
+    {
+      className,
+      tabs = [
+        { label: 'Metadata', value: 'metadata' },
+        { label: 'Messages', value: 'messages' },
+      ],
+      children,
+    },
+    ref,
+  ) {
+    const [selectedTab, setSelectedTab] = useState<string>('metadata')
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex flex-col flex-grow min-h-0 bg-background',
+          'border border-border rounded-lg items-center relative',
+          className,
+        )}
+      >
+        <div className='pt-6 pb-2'>
+          <TabSelector
+            options={tabs}
+            selected={selectedTab}
+            onSelect={setSelectedTab}
+          />
+        </div>
+        <div className='w-full custom-scrollbar overflow-y-auto'>
+          <div className='flex px-4 py-5 flex-col gap-4 w-full overflow-x-auto'>
+            {children({ selectedTab })}
+          </div>
         </div>
       </div>
-    </div>
-  )
-}
+    )
+  },
+)

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
 
 import { EvaluationDto, ProviderLogDto } from '@latitude-data/core/browser'
 import {
@@ -7,8 +7,10 @@ import {
 } from '@latitude-data/core/repositories'
 import { Button, Icon, Modal, ReactStateDispatch } from '@latitude-data/web-ui'
 import useFetcher from '$/hooks/useFetcher'
+import { useStickyNested } from '$/hooks/useStickyNested'
 import { ROUTES } from '$/services/routes'
 import useProviderLogs from '$/stores/providerLogs'
+import { usePanelDomRef } from 'node_modules/@latitude-data/web-ui/src/ds/atoms/SplitPane'
 import useSWR from 'swr'
 
 import { MetadataInfoTabs } from '../../../../../_components/MetadataInfoTabs'
@@ -67,17 +69,37 @@ export function EvaluationResultInfo({
   evaluation,
   evaluationResult,
   providerLog,
+  tableRef,
+  sidebarWrapperRef,
 }: {
   evaluation: EvaluationDto
   evaluationResult: EvaluationResultWithMetadataAndErrors
   providerLog?: ProviderLogDto
+  tableRef: RefObject<HTMLTableElement>
+  sidebarWrapperRef: RefObject<HTMLDivElement>
 }) {
   const [selected, setSelected] = useState<MaybeDocumentLog>(null)
   const onClickOpen = useCallback(async () => {
     setSelected(evaluationResult.documentLogId)
   }, [evaluationResult.documentLogId])
+  const ref = useRef<HTMLDivElement | null>(null)
+  const [target, setTarget] = useState<HTMLDivElement | null>(null)
+  useEffect(() => {
+    if (!ref.current) return
+
+    setTarget(ref.current)
+  }, [ref.current])
+  const scrollableArea = usePanelDomRef({ selfRef: target })
+  const beacon = tableRef.current
+  useStickyNested({
+    scrollableArea,
+    beacon,
+    target,
+    targetContainer: sidebarWrapperRef.current,
+    offset: 24,
+  })
   return (
-    <>
+    <div ref={ref} className='flex flex-col'>
       <MetadataInfoTabs className='w-full'>
         {({ selectedTab }) => (
           <>
@@ -106,6 +128,6 @@ export function EvaluationResultInfo({
           onOpenChange={setSelected}
         />
       ) : null}
-    </>
+    </div>
   )
 }