fix: clerk can't interactive when modal open

Author: Innei

package.json

@@ -102,7 +102,6 @@
     "cross-env": "7.0.3",
     "dotenv": "16.3.1",
     "eslint": "8.56.0",
-    "husky": "8.0.3",
     "lint-staged": "15.2.0",
     "postcss": "8.4.32",
     "postcss-import": "16.0.0",
@@ -141,4 +140,4 @@
       "string.prototype.matchall": "npm:@nolyfill/string.prototype.matchall@latest"
     }
   }
-}
+}

src/components/widgets/comment/CommentBox/SignedOutContent.tsx

@@ -7,11 +7,13 @@ import { SignInButton } from '@clerk/nextjs'
 import { UserArrowLeftIcon } from '~/components/icons/user-arrow-left'
 import { StyledButton } from '~/components/ui/button'
 import { urlBuilder } from '~/lib/url-builder'
+import { useModalStack } from '~/providers/root/modal-stack-provider'
 
 import { CommentBoxMode, setCommentMode } from './hooks'
 
 export function CommentBoxSignedOutContent() {
   const pathname = usePathname()
+  const { dismissAll } = useModalStack()
 
   return (
     <div className="flex h-[150px] w-full space-x-4 rounded-lg bg-gray-100/80 center dark:bg-zinc-900/80">
@@ -25,7 +27,13 @@ export function CommentBoxSignedOutContent() {
         免登录评论
       </StyledButton>
       <SignInButton mode="modal" redirectUrl={urlBuilder(pathname).href}>
-        <StyledButton variant="primary" type="button">
+        <StyledButton
+          onClick={() => {
+            dismissAll()
+          }}
+          variant="primary"
+          type="button"
+        >
           <UserArrowLeftIcon className="mr-1 h-5 w-5" />
           登录后才可以留言噢
         </StyledButton>

src/styles/clerk.css

@@ -2,7 +2,8 @@
 .cl-userButtonPopoverCard {
   @apply border shadow-xl shadow-zinc-500/10 backdrop-blur-xl backdrop-saturate-150;
   @apply border-zinc-200 bg-zinc-50/80 text-zinc-800;
-  @apply py-4;
+  @apply pointer-events-auto py-4;
+
   --accent: theme('colors.zinc.900');
   --accentDark: theme('colors.zinc.800');
 }