fix: prevent LayoutTransition animation from affecting fixed header

actions-user · actions-user · commit e115335fb83d · 2026-04-01T23:38:25.000-05:00
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -74,7 +74,7 @@ export default function RootLayout({
           `}
         </Script>
       </head>
-      <body className={`${Raleway.className} antialiased bg-white`}>
+      <body className={`${Raleway.className} antialiased bg-white overflow-x-hidden`}>
         {/*
           The GlobalErrorHandler is an invisible component that sets up
           window-level event listeners for catching uncaught errors.
@@ -83,26 +83,28 @@ export default function RootLayout({
         <CliOverlay />
         <div className="flex flex-col min-h-screen">
           <Header />
-          <LayoutTransition
-            initial={{ opacity: 0 }}
-            animate={{ x: 100, opacity: 1 }}
-            exit={{ opacity: 0 }}
-            style={{ position: 'absolute' }}
-          >
-            {/* Main content area */}
-            <main className="flex text-black bg-white">
-              {' '}
-              {/*
+          <div className="relative flex-1 overflow-x-hidden">
+            <LayoutTransition
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              style={{ position: 'absolute' }}
+            >
+              {/* Main content area */}
+              <main className="flex text-black bg-white">
+                {' '}
+                {/*
                 The ErrorBoundary wraps your entire application. It will catch
                 any rendering errors and display a fallback UI instead of crashing.
               */}
-              <ErrorBoundary>
-                <div className="w-screen">{children}</div>
-              </ErrorBoundary>
-            </main>
-            {/* Footer */}
-            <Footer />
-          </LayoutTransition>
+                <ErrorBoundary>
+                  <div className="w-screen">{children}</div>
+                </ErrorBoundary>
+              </main>
+              {/* Footer */}
+              <Footer />
+            </LayoutTransition>
+          </div>
         </div>
       </body>
     </html>
