improvement: address feedback

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

@@ -2,10 +2,12 @@ import { MouseEventHandler } from "react";
 
 export const HeaderResizer = ({
   onMouseDown,
-  isActive
+  isActive,
+  scrollOffset
 }: {
   onMouseDown: MouseEventHandler<HTMLDivElement>;
   isActive: boolean;
+  scrollOffset: number;
 }) => {
   return (
     <>
@@ -20,7 +22,10 @@ export const HeaderResizer = ({
           transform: "translateY(50%)"
         }}
       />
-      <div className="pointer-events-none absolute -bottom-[0.1rem] left-1/2 z-30 -translate-x-1/2">
+      <div
+        style={{ left: `calc(39.5% + ${scrollOffset}px)` }}
+        className="pointer-events-none absolute -bottom-[0.1rem] 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

@@ -104,6 +104,7 @@ import {
   useSecretRotationOverview
 } from "@app/hooks/utils";
 import { SecretOverviewSecretRotationRow } from "@app/pages/secret-manager/OverviewPage/components/SecretOverviewSecretRotationRow";
+import { getHeaderStyle } from "@app/pages/secret-manager/OverviewPage/components/utils";
 
 import { CreateDynamicSecretForm } from "../SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm";
 import { FolderForm } from "../SecretDashboardPage/components/ActionBar/FolderForm";
@@ -149,6 +150,8 @@ const DEFAULT_FILTER_STATE = {
   [RowType.SecretRotation]: true
 };
 
+const DEFAULT_COLLAPSED_HEADER_HEIGHT = 120;
+
 export const OverviewPage = () => {
   const { t } = useTranslation();
 
@@ -868,11 +871,14 @@ export const OverviewPage = () => {
     );
   }, [importedByEnvs, selectedEntries, selectedKeysCount]);
 
-  const storedHeight = Number.parseInt(localStorage.getItem("overview-header-height") ?? "96");
+  const storedHeight = Number.parseInt(
+    localStorage.getItem("overview-header-height") ?? DEFAULT_COLLAPSED_HEADER_HEIGHT.toString(),
+    10
+  );
   const { headerHeight, handleMouseDown, isResizing } = useResizableHeaderHeight({
-    initialHeight: Number.isNaN(storedHeight) ? 96 : storedHeight,
+    initialHeight: Number.isNaN(storedHeight) ? DEFAULT_COLLAPSED_HEADER_HEIGHT : storedHeight,
-    minHeight: 96,
+    minHeight: DEFAULT_COLLAPSED_HEADER_HEIGHT,
-    maxHeight: 192
+    maxHeight: 288
   });
 
   const debouncedHeaderHeight = useDebounce(headerHeight);
@@ -986,7 +992,10 @@ export const OverviewPage = () => {
                     </Tooltip>
                   </IconButton>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
+                <DropdownMenuContent
+                  className="thin-scrollbar max-h-[70vh] overflow-y-auto"
+                  align="end"
+                >
                   {/* <DropdownMenuItem className="px-1.5" asChild>
                     <Button
                       size="xs"
@@ -1203,7 +1212,7 @@ export const OverviewPage = () => {
           secretsToDeleteKeys={secretsToDeleteKeys}
           usedBySecretSyncs={usedBySecretSyncs}
         />
-        <div className="thin-scrollbar mt-4">
+        <div className="thin-scrollbar relative mt-4">
           <TableContainer
             onScroll={(e) => setScrollOffset(e.currentTarget.scrollLeft)}
             className="thin-scrollbar rounded-b-none"
@@ -1299,15 +1308,17 @@ export const OverviewPage = () => {
                       <Th
                         className={twMerge(
                           "min-table-row border-b-0 p-0 text-xs",
-                          collapseEnvironments && index === visibleEnvs.length - 1 && "mr-8",
+                          collapseEnvironments && index === visibleEnvs.length - 1 && "!mr-8",
-                          // eslint-disable-next-line no-nested-ternary
+                          !collapseEnvironments && "min-w-[11rem] text-center"
-                          collapseEnvironments
-                            ? isLast
-                              ? "!w-[3.8rem]"
-                              : "w-[1rem]"
-                            : "min-w-[11rem] text-center"
                         )}
-                        style={{ height: collapseEnvironments ? headerHeight : undefined }}
+                        style={
+                          collapseEnvironments
+                            ? {
+                                height: headerHeight,
+                                width: "w-[1rem]"
+                              }
+                            : undefined
+                        }
                         key={`secret-overview-${name}-${index + 1}`}
                       >
                         <Tooltip
@@ -1330,11 +1341,15 @@ export const OverviewPage = () => {
                             className={twMerge(
                               "border-b border-mineshaft-600",
                               collapseEnvironments
-                                ? "relative min-w-[2.9rem]"
+                                ? "relative"
                                 : "flex items-center justify-center px-5 pb-[0.82rem] pt-3.5",
                               collapseEnvironments && isLast && "overflow-clip"
                             )}
-                            style={{ height: collapseEnvironments ? headerHeight : undefined }}
+                            style={{
+                              height: collapseEnvironments ? headerHeight : undefined,
+                              minWidth: collapseEnvironments ? "2.9rem" : undefined,
+                              width: collapseEnvironments && isLast ? headerHeight * 0.3 : undefined
+                            }}
                           >
                             <div
                               className={twMerge(
@@ -1353,25 +1368,14 @@ export const OverviewPage = () => {
                               className={twMerge(
                                 "duration-100 hover:text-mineshaft-100",
                                 collapseEnvironments
-                                  ? "absolute -rotate-[72.25deg] text-left !text-[12px] font-normal"
+                                  ? "absolute -rotate-[72.75deg] text-left text-sm font-normal"
                                   : "flex items-center text-center text-sm font-medium"
                               )}
-                              style={
+                              style={getHeaderStyle({
-                                // eslint-disable-next-line no-nested-ternary
+                                collapseEnvironments,
-                                collapseEnvironments
+                                isLast,
-                                  ? isLast
+                                headerHeight
-                                    ? {
+                              })}
-                                        bottom: 42,
-                                        left: 0,
-                                        width: 86
-                                      }
-                                    : {
-                                        width: headerHeight * 0.9,
-                                        bottom: headerHeight * 0.45,
-                                        left: 24 - (headerHeight * 0.9) / 3.05
-                                      }
-                                  : undefined
-                              }
                               onClick={() => handleExploreEnvClick(slug)}
                             >
                               <p className="truncate font-medium">{name}</p>
@@ -1393,7 +1397,11 @@ export const OverviewPage = () => {
                   })}
                 </Tr>
                 {collapseEnvironments && (
-                  <HeaderResizer onMouseDown={handleMouseDown} isActive={isResizing} />
+                  <HeaderResizer
+                    onMouseDown={handleMouseDown}
+                    isActive={isResizing}
+                    scrollOffset={scrollOffset}
+                  />
                 )}
               </THead>
               <TBody>
@@ -1554,9 +1562,9 @@ export const OverviewPage = () => {
                       style={{ height: "45px" }}
                     />
                   </Td>
-                  {visibleEnvs?.map(({ name, slug }) => (
+                  {visibleEnvs?.map(({ name, slug }, i) => (
                     <Td
-                      key={`explore-${name}-btn`}
+                      key={`explore-${name}-btn-${i + 1}`}
                       className="border-0 border-r border-mineshaft-600 p-0"
                     >
                       <div

frontend/src/pages/secret-manager/OverviewPage/components/utils/index.ts

@@ -3,3 +3,33 @@ export const getExpandedRowStyle = (scrollOffset: number) => ({
   width: "calc(100vw - 355px)", // 350px accounts for sidebar and margin
   maxWidth: "1270px" // largest width of table on ultra-wide
 });
+
+type GetHeaderStyleParams = {
+  collapseEnvironments: boolean;
+  isLast: boolean;
+  headerHeight: number;
+};
+
+export const getHeaderStyle = ({
+  collapseEnvironments,
+  isLast,
+  headerHeight
+}: GetHeaderStyleParams) => {
+  if (!collapseEnvironments) return undefined;
+
+  // scott: this is mostly trial/error to keep centered with skew
+  if (isLast) {
+    return {
+      width: headerHeight * 0.42,
+      bottom: headerHeight * 0.222,
+      left: 2
+    };
+  }
+
+  return {
+    // scott: this is mostly trial/error to keep centered with skew
+    width: headerHeight * 0.9,
+    bottom: headerHeight * 0.45,
+    left: 24 - (headerHeight * 0.9) / 2.985
+  };
+};