Merge pull request #10552 from growilabs/fix/174985-page-editor-is-not-displayed-when-accessing-directly-in-editor-mode

fix: Page editor is not displayed when accessing directly in editor mode

apps/app/src/components/Layout/RawLayout.tsx

@@ -29,9 +29,23 @@ type Props = {
 
 export const RawLayout = ({ children, className }: Props): JSX.Element => {
   const classNames: string[] = ['layout-root', 'growi'];
-  if (className != null) {
-    classNames.push(className);
+
+  // Use state to handle SSR/CSR className mismatch
+  // Using state ensures React properly updates the DOM after hydration
+  const [dynamicClassName, setDynamicClassName] = useState<string | undefined>(
+    undefined,
+  );
+
+  useIsomorphicLayoutEffect(() => {
+    if (className !== dynamicClassName) {
+      setDynamicClassName(className);
+    }
+  }, [className, dynamicClassName]);
+
+  if (dynamicClassName != null) {
+    classNames.push(dynamicClassName);
   }
+
   // get color scheme from next-themes
   const { resolvedTheme, resolvedThemeByAttributes } = useNextThemes();