fix: nextra & panda styles conflicting

package.json

@@ -16,6 +16,7 @@
     "dev": "next dev",
     "build": "next build",
     "build:ci": "pnpm generate && pnpm build",
+    "postinstall": "node ./scripts/nextra-css-layer.mjs",
     "postbuild": "next-sitemap",
     "start": "next start",
     "generate": "pnpm generate:embeddings",

panda.config.ts

@@ -7,6 +7,7 @@ export default defineBeamUiConfig({
     './**/*.{ts,tsx}',
     './pages/**/*.mdx',
   ],
+  preflight: false,
   layers: {
     reset: 'beam-reset',
     base: 'beam-base',

scripts/nextra-css-layer.mjs

@@ -0,0 +1,28 @@
+import * as fs from 'node:fs';
+
+const filename = './node_modules/nextra-theme-docs/dist/style.css';
+
+fs.readFile(filename, 'utf8', (err, data) => {
+  if (err) {
+    // biome-ignore lint/suspicious/noConsoleLog: Allowed in script
+    console.log(err);
+    return;
+  }
+
+  if (data.includes('@layer nextra')) {
+    return;
+  }
+
+  const newContent = `
+@layer nextra {
+  ${data}
+}
+`;
+
+  fs.writeFile(filename, newContent, 'utf8', (err) => {
+    if (err) {
+      // biome-ignore lint/suspicious/noConsoleLog: Allowed in script
+      console.log(err);
+    }
+  });
+});

styles.css

@@ -19,6 +19,8 @@ html {
 }
 
 body {
+  /* Reset body width in order to support radix modal's scroll-lock */
+  width: unset !important;
   background: linear-gradient(
       to bottom,
       rgba(255, 255, 255, 0) 0%,

theme.config.tsx

@@ -65,17 +65,20 @@ const config: DocsThemeConfig = {
     );
   },
   footer: {
-    content: () => {
+    component: () => {
       const open = useGTMStore((store) => store.openConsentModal);
 
       return (
-        <div
+        <footer
           className={hstack({
             align: 'center',
             gap: '4',
             px: '4',
-            pb: '4',
+            py: '4',
             color: 'mono.100',
+            bg: 'mono.650',
+            borderTop: '1px solid',
+            borderColor: 'mono.550',
           })}
         >
           <span className={text({ style: 'sm' })}>
@@ -89,7 +92,7 @@ const config: DocsThemeConfig = {
           >
             cookies
           </Link>
-        </div>
+        </footer>
       );
     },
   },