Fix locked body (#213)

* Fix locked body

* Fix style

---------

Co-authored-by: Marek Bodinger <marek.bodinger@gmail.com>

next/modules/common/Modal.tsx

@@ -4,16 +4,10 @@ import cx from 'classnames'
 import FocusTrap from 'focus-trap-react'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useTranslation } from 'next-i18next'
-import { ReactNode, useRef } from 'react'
-import {
-  AriaOverlayProps,
-  OverlayContainer,
-  useModal,
-  useOverlay,
-  usePreventScroll,
-} from 'react-aria'
+import { ReactNode, useEffect, useRef } from 'react'
+import { AriaOverlayProps, OverlayContainer, useModal, useOverlay } from 'react-aria'
 import { twMerge } from 'tailwind-merge'
-import { useIsClient } from 'usehooks-ts'
+import { useIsClient, useLockedBody } from 'usehooks-ts'
 
 export type ModalProps = {
   children: ReactNode
@@ -44,7 +38,12 @@ const Modal = (props: ModalProps) => {
     { ...props, isDismissable: isDismissable === undefined ? true : isDismissable },
     ref
   )
-  usePreventScroll({ isDisabled: !isOpen })
+  const [, setLockedBody] = useLockedBody(isOpen)
+
+  useEffect(() => {
+    setLockedBody(isOpen ?? false)
+  }, [isOpen, setLockedBody])
+
   const { modalProps } = useModal()
 
   const isClient = useIsClient()

next/modules/navigation/MobileSubnavigation.tsx

@@ -31,7 +31,7 @@ const MobileSubnavigation = ({ isOpen, menuSections, onClose }: SubnavigationPro
           </div>
           {menuSections.map((section, index) => (
             // eslint-disable-next-line react/no-array-index-key
-            <div key={index} className="py-4 pl-4">
+            <div key={index} className="p-4">
               {/* class pb-[10px] with py-1.5 on MLink makes 16px gap */}
               <div className="pb-[10px] text-lg">{section.label}</div>