src/components/ProfileSection.tsx

@@ -4,7 +4,12 @@ import { QRCodeSVG } from 'qrcode.react'
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { toast } from 'react-toastify'
-import { useAppSelector, useDidMount, useNDKContext } from '../hooks'
+import {
+  useAppSelector,
+  useBodyScrollDisable,
+  useDidMount,
+  useNDKContext
+} from '../hooks'
 import { appRoutes, getProfilePageRoute } from '../routes'
 import '../styles/author.css'
 import '../styles/innerPage.css'
@@ -254,6 +259,8 @@ export const ProfileQRButtonWithPopUp = ({
 }: QRButtonWithPopUpProps) => {
   const [isOpen, setIsOpen] = useState(false)
 
+  useBodyScrollDisable(isOpen)
+
   const nprofile = nip19.nprofileEncode({
     pubkey
   })
@@ -335,6 +342,8 @@ type ZapButtonWithPopUpProps = {
 const ZapButtonWithPopUp = ({ pubkey }: ZapButtonWithPopUpProps) => {
   const [isOpen, setIsOpen] = useState(false)
 
+  useBodyScrollDisable(isOpen)
+
   return (
     <>
       <div

src/hooks/index.ts

@@ -6,3 +6,4 @@ export * from './useMuteLists'
 export * from './useNSFWList'
 export * from './useReactions'
 export * from './useNDKContext'
+export * from './useScrollDisable'

src/hooks/useScrollDisable.ts

@@ -0,0 +1,11 @@
+import { useEffect } from 'react'
+
+export const useBodyScrollDisable = (disable: boolean) => {
+  useEffect(() => {
+    if (disable) document.body.style.overflow = 'hidden'
+
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [disable])
+}

src/layout/header.tsx

@@ -9,6 +9,7 @@ import { ZapPopUp } from '../components/Zap'
 import {
   useAppDispatch,
   useAppSelector,
+  useBodyScrollDisable,
   useDidMount,
   useNDKContext
 } from '../hooks'
@@ -26,6 +27,18 @@ export const Header = () => {
   const { findMetadata } = useNDKContext()
   const userState = useAppSelector((state) => state.user)
 
+  // Track nostr-login extension modal open state
+  const [isOpen, setIsOpen] = useState(false)
+  const handleOpen = () => setIsOpen(true)
+  const handleClose = () => setIsOpen(false)
+  useEffect(() => {
+    window.addEventListener('nlCloseModal', handleClose)
+    return () => {
+      window.removeEventListener('nlCloseModal', handleClose)
+    }
+  }, [])
+  useBodyScrollDisable(isOpen)
+
   useEffect(() => {
     initNostrLogin({
       darkMode: true,
@@ -65,6 +78,7 @@ export const Header = () => {
   }, [dispatch, findMetadata])
 
   const handleLogin = () => {
+    handleOpen()
     launchNostrLoginDialog()
   }
 
@@ -259,6 +273,8 @@ const TipButtonWithDialog = React.memo(() => {
   const [adminNpub, setAdminNpub] = useState<string | null>(null)
   const [isOpen, setIsOpen] = useState(false)
 
+  useBodyScrollDisable(isOpen)
+
   useDidMount(async () => {
     const adminNpubs = import.meta.env.VITE_ADMIN_NPUBS.split(',')
     setAdminNpub(adminNpubs[0])
@@ -320,6 +336,8 @@ const TipButtonWithDialog = React.memo(() => {
 const RegisterButtonWithDialog = () => {
   const [showPopUp, setShowPopUp] = useState(false)
 
+  useBodyScrollDisable(showPopUp)
+
   return (
     <>
       <a

src/pages/mod/index.tsx

@@ -11,7 +11,12 @@ import { toast } from 'react-toastify'
 import { BlogCard } from '../../components/BlogCard'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { ProfileSection } from '../../components/ProfileSection'
-import { useAppSelector, useDidMount, useNDKContext } from '../../hooks'
+import {
+  useAppSelector,
+  useBodyScrollDisable,
+  useDidMount,
+  useNDKContext
+} from '../../hooks'
 import { getGamePageRoute, getModsEditPageRoute } from '../../routes'
 import '../../styles/comments.css'
 import '../../styles/downloads.css'
@@ -220,6 +225,8 @@ const Game = ({ naddr, game, author, aTag }: GameProps) => {
   const [isBlocked, setIsBlocked] = useState(false)
   const [isAddedToNSFW, setIsAddedToNSFW] = useState(false)
 
+  useBodyScrollDisable(showReportPopUp)
+
   useEffect(() => {
     if (userState.auth && userState.user?.pubkey) {
       const pubkey = userState.user.pubkey as string

src/pages/mod/internal/comment/index.tsx

@@ -1,7 +1,13 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk'
 import { ZapPopUp } from 'components/Zap'
 import { formatDate } from 'date-fns'
-import { useAppSelector, useDidMount, useNDKContext, useReactions } from 'hooks'
+import {
+  useAppSelector,
+  useBodyScrollDisable,
+  useDidMount,
+  useNDKContext,
+  useReactions
+} from 'hooks'
 import { useComments } from 'hooks/useComments'
 import { Event, kinds, nip19, UnsignedEvent } from 'nostr-tools'
 import React, {
@@ -495,6 +501,8 @@ const Zap = (props: Event) => {
   const userState = useAppSelector((state) => state.user)
   const { getTotalZapAmount } = useNDKContext()
 
+  useBodyScrollDisable(isOpen)
+
   useDidMount(() => {
     getTotalZapAmount(
       props.pubkey,

src/pages/mod/internal/zap/index.tsx

@@ -1,5 +1,10 @@
 import { ZapSplit } from 'components/Zap'
-import { useAppSelector, useDidMount, useNDKContext } from 'hooks'
+import {
+  useAppSelector,
+  useBodyScrollDisable,
+  useDidMount,
+  useNDKContext
+} from 'hooks'
 import { useState } from 'react'
 import { toast } from 'react-toastify'
 import { ModDetails } from 'types'
@@ -17,6 +22,8 @@ export const Zap = ({ modDetails }: ZapProps) => {
   const userState = useAppSelector((state) => state.user)
   const { getTotalZapAmount } = useNDKContext()
 
+  useBodyScrollDisable(isOpen)
+
   useDidMount(() => {
     getTotalZapAmount(
       modDetails.author,

src/styles/cardMod.css

@@ -143,3 +143,10 @@
   align-items: center;
   color: rgba(255, 255, 255, 0.25);
 }
+
+.IBMSMSMBSSTagsTag.IBMSMSMBSSTagsTagNSFW.IBMSMSMBSSTagsTagNSFWCard {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    backdrop-filter: blur(10px);
+}