docs: Made UI elements no longer overflow demo box (#2043)

matthewlipski · web-flow · commit 87ee891520bc · 2025-10-02T19:21:14.000+02:00
* Made UI elements not overflow demo box

* Prevented header overflow
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -23,7 +23,7 @@ export default function Layout({ children }: { children: ReactNode }) {
       <body className="flex min-h-screen flex-col [--spacing-fd-container:1566px]">
         <Banner
           height="24px"
-          className="whitespace-break-spaces bg-[#fef6d5] text-black"
+          className="z-[10000] whitespace-break-spaces bg-[#fef6d5] text-black"
         >
           🚀 BlockNote AI is here!{" "}
           <a href="/docs/features/ai" className="italic underline">
diff --git a/docs/app/styles.css b/docs/app/styles.css
@@ -45,10 +45,22 @@ body {
   color: var(--color-fd-primary);
 }
 
+#nd-nav {
+  z-index: 10000;
+}
+
 :focus-visible {
   box-shadow: unset !important;
 }
 
+.demo {
+  overflow: none;
+}
+
+.demo .bn-container {
+  position: relative;
+}
+
 .demo .bn-container:not(.bn-comment-editor),
 .demo .bn-editor {
   height: 100%;

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export default function Layout({ children }: { children: ReactNode }) {`
`23`	`23`	`<body className="flex min-h-screen flex-col [--spacing-fd-container:1566px]">`
`24`	`24`	`<Banner`
`25`	`25`	`height="24px"`
`26`		`- className="whitespace-break-spaces bg-[#fef6d5] text-black"`
	`26`	`+ className="z-[10000] whitespace-break-spaces bg-[#fef6d5] text-black"`
`27`	`27`	`>`
`28`	`28`	`🚀 BlockNote AI is here!{" "}`
`29`	`29`	`<a href="/docs/features/ai" className="italic underline">`