improvement: adjust header drag to use table container for positioning

frontend/src/components/v2/HeaderResizer/HeaderResizer.tsx

@@ -3,28 +3,31 @@ import { MouseEventHandler } from "react";
 export const HeaderResizer = ({
   onMouseDown,
   isActive,
-  scrollOffset
+  scrollOffset,
+  heightOffset
 }: {
   onMouseDown: MouseEventHandler<HTMLDivElement>;
   isActive: boolean;
   scrollOffset: number;
+  heightOffset: number;
 }) => {
   return (
     <>
       <div
         tabIndex={-1}
         role="button"
-        className={`absolute bottom-[0.02rem] left-0 z-40 h-0.5 w-full cursor-ns-resize hover:bg-blue-400/20 ${
+        className={`absolute left-0 z-40 h-0.5 w-full cursor-ns-resize hover:bg-blue-400/20 ${
           isActive ? "bg-blue-400/75" : "bg-transparent"
         }`}
         onMouseDown={onMouseDown}
         style={{
-          transform: "translateY(50%)"
+          transform: "translateY(50%)",
+          top: heightOffset
         }}
       />
       <div
-        style={{ left: `calc(43% + ${scrollOffset}px)` }}
-        className="pointer-events-none absolute -bottom-[0.1rem] z-30 -translate-x-1/2"
+        style={{ left: `calc(50% + ${scrollOffset}px)`, top: heightOffset }}
+        className="pointer-events-none absolute z-30 -translate-x-1/2"
       >
         <div className="h-1 w-8 rounded bg-gray-400 opacity-50" />
       </div>

frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 import { subject } from "@casl/ability";
@@ -169,7 +169,7 @@ export const OverviewPage = () => {
   const [scrollOffset, setScrollOffset] = useState(0);
   const [debouncedScrollOffset] = useDebounce(scrollOffset);
   const { permission } = useProjectPermission();
-
+  const tableRef = useRef<HTMLDivElement>(null);
   const { currentWorkspace } = useWorkspace();
   const isProjectV3 = currentWorkspace?.version === ProjectVersion.V3;
   const workspaceId = currentWorkspace?.id as string;
@@ -925,7 +925,7 @@ export const OverviewPage = () => {
         <meta property="og:title" content={String(t("dashboard.og-title"))} />
         <meta name="og:description" content={String(t("dashboard.og-description"))} />
       </Helmet>
-      <div className="mx-auto max-w-7xl text-mineshaft-50 dark:[color-scheme:dark]">
+      <div className="relative mx-auto max-w-7xl text-mineshaft-50 dark:[color-scheme:dark]">
         <div className="flex w-full items-baseline justify-between">
           <PageHeader
             title="Secrets Overview"
@@ -1212,16 +1212,13 @@ export const OverviewPage = () => {
           secretsToDeleteKeys={secretsToDeleteKeys}
           usedBySecretSyncs={usedBySecretSyncs}
         />
-        <div className="thin-scrollbar mt-4">
+        <div ref={tableRef} className="thin-scrollbar mt-4">
           <TableContainer
             onScroll={(e) => setScrollOffset(e.currentTarget.scrollLeft)}
             className="thin-scrollbar rounded-b-none"
           >
             <Table>
-              <THead
-                className="relative"
-                style={{ height: collapseEnvironments ? headerHeight : undefined }}
-              >
+              <THead style={{ height: collapseEnvironments ? headerHeight : undefined }}>
                 <Tr
                   className="sticky top-0 z-20 border-0"
                   style={{ height: collapseEnvironments ? headerHeight : undefined }}
@@ -1401,6 +1398,7 @@ export const OverviewPage = () => {
                     onMouseDown={handleMouseDown}
                     isActive={isResizing}
                     scrollOffset={scrollOffset}
+                    heightOffset={(tableRef.current?.clientTop ?? 0) + headerHeight - 2.5}
                   />
                 )}
               </THead>