Ver Fonte

🐛 fix: SSR hydration mismatch in mobile detection & clean up sidebar style

- Added a server-snapshot fallback (`() => false`) to `useIsMobile` to ensure
  consistent results between server-side rendering and the browser, preventing
  hydration mismatches.
- Removed a redundant ternary in `PageLayout` sidebar styles, replacing
  `isMobile ? 'fixed' : 'fixed'` with a single `'fixed'` value for clarity.

These changes improve SSR reliability and tidy up inline styles without
affecting runtime functionality.
t0ng7u há 7 meses atrás
pai
commit
3360b34af9

+ 1 - 1
web/src/components/layout/PageLayout.js

@@ -115,7 +115,7 @@ const PageLayout = () => {
         {showSider && (
         {showSider && (
           <Sider
           <Sider
             style={{
             style={{
-              position: isMobile ? 'fixed' : 'fixed',
+              position: 'fixed',
               left: 0,
               left: 0,
               top: '64px',
               top: '64px',
               zIndex: 99,
               zIndex: 99,

+ 1 - 0
web/src/hooks/useIsMobile.js

@@ -11,5 +11,6 @@ export const useIsMobile = () => {
       return () => mql.removeEventListener('change', callback);
       return () => mql.removeEventListener('change', callback);
     },
     },
     () => window.matchMedia(query).matches,
     () => window.matchMedia(query).matches,
+    () => false,
   );
   );
 }; 
 };