Merge pull request #801 from devtron-labs/fix/use-sticky-decimal-width

fix: app details manifest scroll on change of resolution

Author: AbhishekA1509

package-lock.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",

package.json

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
-export const FALLBACK_SENTINEL_HEIGHT = '1px'
+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 = '0px'
+export const OBSERVER_ROOT_MARGIN = '1px'

src/Shared/Hooks/useStickyEvent/constants.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 = <T extends HTMLElement>({
@@ -30,7 +30,7 @@ export const getHeightForStickyElementTopOffset = <T extends HTMLElement>({
     const doesTopOffsetContainCalc = calcRegex.test(topValue)
 
     if (doesTopOffsetContainCalc) {
-        return topValue.replace(calcRegex, (match) => `calc(${match} + 1px)`)
+        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 = <T extends HTMLElement>({
             return FALLBACK_SENTINEL_HEIGHT
         }
 
-        return `${nMatch + 1}`
+        return `${nMatch + SENTINEL_HEIGHT_BUFFER}`
     })
 }