Merge pull request #431 from gertrude-app/docs-overflow-fix

site: fixed pink blur overflowing on mobile docs pages
gertrude-app · Dec 27, 2024 · 1e976a0 · 1e976a0
2 parents 6f4cbaf + fbc54ad
commit 1e976a0
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/site/app/docs/[slug]/layout.tsx b/site/app/docs/[slug]/layout.tsx
@@ -9,8 +9,10 @@ const DocsLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   return (
     <html lang="en" className="scroll-smooth">
-      <body className="bg-white flex relative overflow-x-clip">
-        <div className="absolute h-[100vw] w-screen -right-[50vh] -top-[50vw] [background:radial-gradient(#fae8ff,transparent_75%)]"></div>
+      <body className="bg-white flex relative overflow-x-hidden">
+        <div className="absolute w-screen h-screen left-0 top-0 pointer-events-none overflow-hidden">
+          <div className="absolute h-[100vw] w-screen -right-[50vh] -top-[50vw] [background:radial-gradient(#fae8ff,transparent_75%)]"></div>
+        </div>
         <Sidebar open={sidebarOpen} setOpen={setSidebarOpen} />
         <main className="flex-grow lg:ml-80">
           <header className="p-6 xs:p-8 flex justify-between lg:hidden fixed top-0 z-20">