fix(options): fix meteors overflow

src/app/options/App.tsx

@@ -2,18 +2,17 @@ import { Toaster } from 'sonner'
 import Main from './components/Main'
 import ProfileForm from './components/ProfileForm'
 import BadgeList from './components/BadgeList'
-import Meteors from '@/components/magicui/meteors'
+import Layout from './components/Layout'
 
 function App() {
   return (
-    <>
+    <Layout>
-      <Meteors number={30} />
-      <BadgeList></BadgeList>
       <Main>
         <ProfileForm></ProfileForm>
         <Toaster richColors position="top-center" />
       </Main>
-    </>
+      <BadgeList></BadgeList>
+    </Layout>
   )
 }
 

src/app/options/components/BadgeList.tsx

@@ -4,7 +4,7 @@ import { GitHubLogoIcon } from '@radix-ui/react-icons'
 
 const BadgeList: FC = () => {
   return (
-    <div className="fixed inset-x-1 bottom-6 mx-auto flex w-fit font-sans">
+    <div className="fixed inset-x-1 bottom-6 mx-auto flex w-fit">
       <Button asChild size="lg" variant="ghost" className="rounded-full px-3 text-xl font-semibold text-primary">
         <a href="https://github.com/molvqingtai/WebChat" target="https://github.com/molvqingtai/WebChat">
           <GitHubLogoIcon className="mr-1 size-6"></GitHubLogoIcon>

src/app/options/components/Layout.tsx

@@ -0,0 +1,20 @@
+import Meteors from '@/components/magicui/meteors'
+import { FC, ReactNode } from 'react'
+
+export interface LayoutProps {
+  children?: ReactNode
+}
+
+const Layout: FC<LayoutProps> = ({ children }) => {
+  return (
+    <div className="h-screen w-screen bg-gray-50 bg-[url(@/assets/images/texture.png)] font-sans">
+      <div className="fixed left-0 top-0 h-full w-screen overflow-hidden">
+        <Meteors number={30} />
+      </div>
+      <div className="relative z-10 min-h-screen min-w-screen">{children}</div>
+    </div>
+  )
+}
+
+Layout.displayName = 'Layout'
+export default Layout

src/app/options/components/Main.tsx

@@ -1,12 +1,12 @@
 import { type ReactNode, type FC } from 'react'
 
-export interface AppLayoutProps {
+export interface MainProps {
   children?: ReactNode
 }
 
-const Main: FC<AppLayoutProps> = ({ children }) => {
+const Main: FC<MainProps> = ({ children }) => {
   return (
-    <main className="grid min-h-screen min-w-screen items-center justify-center bg-gray-50 bg-[url(@/assets/images/texture.png)] font-sans">
+    <main className="grid min-h-screen min-w-screen items-center justify-center">
       <div className="relative rounded-xl bg-slate-50 shadow-lg">{children}</div>
     </main>
   )