diff --git a/frontend/src/components/v2/HeaderResizer/HeaderResizer.tsx b/frontend/src/components/v2/HeaderResizer/HeaderResizer.tsx index 1f50133e9..694ac10a0 100644 --- a/frontend/src/components/v2/HeaderResizer/HeaderResizer.tsx +++ b/frontend/src/components/v2/HeaderResizer/HeaderResizer.tsx @@ -2,10 +2,12 @@ import { MouseEventHandler } from "react"; export const HeaderResizer = ({ onMouseDown, - isActive + isActive, + scrollOffset }: { onMouseDown: MouseEventHandler; isActive: boolean; + scrollOffset: number; }) => { return ( <> @@ -20,7 +22,10 @@ export const HeaderResizer = ({ transform: "translateY(50%)" }} /> -
+
diff --git a/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx b/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx index eb160236c..0c673c491 100644 --- a/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx +++ b/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, - minHeight: 96, - maxHeight: 192 + initialHeight: Number.isNaN(storedHeight) ? DEFAULT_COLLAPSED_HEADER_HEIGHT : storedHeight, + minHeight: DEFAULT_COLLAPSED_HEADER_HEIGHT, + maxHeight: 288 }); const debouncedHeaderHeight = useDebounce(headerHeight); @@ -986,7 +992,10 @@ export const OverviewPage = () => { - + {/*