fix: client modal glitches on Integrations-page (#7056)

* ocrvs-7002

* replaced 'auto' with 'scroll'

* changelog.md updated

* fix: react issue with exhaustive deps

---------

Co-authored-by: Pyry <pyry.rouvila@gmail.com>

CHANGELOG.md

@@ -49,6 +49,7 @@
 - Fix issues of invisible inputs when navigating from can't login link in login page [#6163](https://github.com/opencrvs/opencrvs-core/issues/6163)
 - Fix print record page for an unsaved declaration [#6893](https://github.com/opencrvs/opencrvs-core/issues/6893)
 - Fix dashboard cron jobs not working [#7016](https://github.com/opencrvs/opencrvs-core/issues/7016)
+- Fix client modal glitches on integrations page [#7002] (https://github.com/opencrvs/opencrvs-core/issues/7002)
 
 ## Refactor
 

packages/components/src/ResponsiveModal/ResponsiveModal.tsx

@@ -8,7 +8,7 @@
  *
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import styled from 'styled-components'
 import { Cross } from '../icons'
 import { CircleButton } from '../buttons'
@@ -110,7 +110,7 @@ const Body = styled.div<{
     height ? `${height}px` : autoHeight ? `auto` : `250px`};
   max-height: calc(100vh - 180px);
   color: ${({ theme }) => theme.colors.supportingCopy};
-  overflow-y: ${({ scrollableY }) => (scrollableY ? 'visible' : 'auto')};
+  overflow-y: ${({ scrollableY }) => (scrollableY ? 'visible' : 'scroll')};
   padding: 0 24px 16px;
   display: flex;
   flex-direction: column;
@@ -186,13 +186,13 @@ export const ResponsiveModal = ({
   showHeaderBorder,
   children
 }: IProps) => {
-  const toggleScroll = () => {
+  const toggleScroll = useCallback(() => {
     const body = document.querySelector('body') as HTMLBodyElement
     if (show) {
       return (body.style.overflow = 'hidden')
     }
     return body.style.removeProperty('overflow')
-  }
+  }, [show])
 
   useEffect(() => {
     toggleScroll()
@@ -201,7 +201,7 @@ export const ResponsiveModal = ({
       const body = document.querySelector('body') as HTMLBodyElement
       body.style.removeProperty('overflow')
     }
-  }, [show])
+  }, [show, toggleScroll])
 
   if (!show) {
     return null