From 49dd5f001c94177714a017436941e0053e4fbe61 Mon Sep 17 00:00:00 2001 From: AbhishekA1509 Date: Thu, 26 Jun 2025 15:36:02 +0530 Subject: [PATCH 1/3] fix: add root margin of 1px and increase sentinel height by 1px to overcome decimal dimensions --- src/Shared/Hooks/useStickyEvent/constants.ts | 4 ++-- src/Shared/Hooks/useStickyEvent/utils.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Shared/Hooks/useStickyEvent/constants.ts b/src/Shared/Hooks/useStickyEvent/constants.ts index 2e7292418..6a59ebed6 100644 --- a/src/Shared/Hooks/useStickyEvent/constants.ts +++ b/src/Shared/Hooks/useStickyEvent/constants.ts @@ -14,6 +14,6 @@ * limitations under the License. */ -export const FALLBACK_SENTINEL_HEIGHT = '1px' +export const FALLBACK_SENTINEL_HEIGHT = '2px' export const OBSERVER_THRESHOLD = 1 -export const OBSERVER_ROOT_MARGIN = '0px' +export const OBSERVER_ROOT_MARGIN = '1px' diff --git a/src/Shared/Hooks/useStickyEvent/utils.ts b/src/Shared/Hooks/useStickyEvent/utils.ts index 55a742a73..255e20e61 100644 --- a/src/Shared/Hooks/useStickyEvent/utils.ts +++ b/src/Shared/Hooks/useStickyEvent/utils.ts @@ -30,7 +30,7 @@ export const getHeightForStickyElementTopOffset = ({ const doesTopOffsetContainCalc = calcRegex.test(topValue) if (doesTopOffsetContainCalc) { - return topValue.replace(calcRegex, (match) => `calc(${match} + 1px)`) + return topValue.replace(calcRegex, (match) => `calc(${match} + 2px)`) } return topValue.replace(/\d+(\.\d+)?/g, (match) => { @@ -40,6 +40,6 @@ export const getHeightForStickyElementTopOffset = ({ return FALLBACK_SENTINEL_HEIGHT } - return `${nMatch + 1}` + return `${nMatch + 2}` }) } From 4fa194cbec8448b204c84178aa6d3b03b7391f34 Mon Sep 17 00:00:00 2001 From: AbhishekA1509 Date: Thu, 26 Jun 2025 15:44:32 +0530 Subject: [PATCH 2/3] chore(version): bump version to 1.16.1 in package.json and package-lock.json --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 06ebf6472..58a7f0079 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0", + "version": "1.16.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0", + "version": "1.16.1", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index ffa5ad287..cc083b38c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0", + "version": "1.16.1", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From 8d581fff0e95141b102a76f9a404c0fbe575f228 Mon Sep 17 00:00:00 2001 From: AbhishekA1509 Date: Thu, 26 Jun 2025 15:48:54 +0530 Subject: [PATCH 3/3] refactor: replace hardcoded sentinel height with constant for better maintainability --- src/Shared/Hooks/useStickyEvent/constants.ts | 3 ++- src/Shared/Hooks/useStickyEvent/utils.ts | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/Shared/Hooks/useStickyEvent/constants.ts b/src/Shared/Hooks/useStickyEvent/constants.ts index 6a59ebed6..edc6822ee 100644 --- a/src/Shared/Hooks/useStickyEvent/constants.ts +++ b/src/Shared/Hooks/useStickyEvent/constants.ts @@ -14,6 +14,7 @@ * limitations under the License. */ -export const FALLBACK_SENTINEL_HEIGHT = '2px' +export const SENTINEL_HEIGHT_BUFFER = 2 +export const FALLBACK_SENTINEL_HEIGHT = `${SENTINEL_HEIGHT_BUFFER}px` export const OBSERVER_THRESHOLD = 1 export const OBSERVER_ROOT_MARGIN = '1px' diff --git a/src/Shared/Hooks/useStickyEvent/utils.ts b/src/Shared/Hooks/useStickyEvent/utils.ts index 255e20e61..48dcdd7f4 100644 --- a/src/Shared/Hooks/useStickyEvent/utils.ts +++ b/src/Shared/Hooks/useStickyEvent/utils.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { FALLBACK_SENTINEL_HEIGHT } from './constants' +import { FALLBACK_SENTINEL_HEIGHT, SENTINEL_HEIGHT_BUFFER } from './constants' import { UseStickyEventReturnType } from './types' export const getHeightForStickyElementTopOffset = ({ @@ -30,7 +30,7 @@ export const getHeightForStickyElementTopOffset = ({ const doesTopOffsetContainCalc = calcRegex.test(topValue) if (doesTopOffsetContainCalc) { - return topValue.replace(calcRegex, (match) => `calc(${match} + 2px)`) + return topValue.replace(calcRegex, (match) => `calc(${match} + ${SENTINEL_HEIGHT_BUFFER}px)`) } return topValue.replace(/\d+(\.\d+)?/g, (match) => { @@ -40,6 +40,6 @@ export const getHeightForStickyElementTopOffset = ({ return FALLBACK_SENTINEL_HEIGHT } - return `${nMatch + 2}` + return `${nMatch + SENTINEL_HEIGHT_BUFFER}` }) }