refactor(layouts): simplify MainLayout and enhance styling

- Removed unused imports and performance monitoring hooks from MainLayout.
- Updated layout structure to improve responsiveness and styling, including sticky header and optimized content padding.
- Adjusted home page layout to reduce margin and improve spacing for better visual consistency.
- Enhanced TodoList component with collapsible sections for improved user interaction and task management.
- Streamlined project and schedule pages by removing unnecessary margin adjustments, ensuring a cleaner layout.

worklenz-frontend/src/layouts/MainLayout.tsx

@@ -1,62 +1,18 @@
-import { Col, ConfigProvider, Layout } from '@/shared/antd-imports';
-import { Outlet } from 'react-router-dom';
-import { memo, useMemo, useEffect, useRef } from 'react';
-import { useMediaQuery } from 'react-responsive';
+import { ConfigProvider, Layout } from '@/shared/antd-imports';
+import { Outlet, useLocation } from 'react-router-dom';
+import { memo, useMemo } from 'react';
 
 import Navbar from '../features/navbar/navbar';
 import { useAppSelector } from '../hooks/useAppSelector';
 import { colors } from '../styles/colors';
 
-import { useRenderPerformance } from '@/utils/performance';
-import { DynamicCSSLoader, LayoutStabilizer } from '@/utils/css-optimizations';
-
 const MainLayout = memo(() => {
   const themeMode = useAppSelector(state => state.themeReducer.mode);
-  const isDesktop = useMediaQuery({ query: '(min-width: 1024px)' });
-  const layoutRef = useRef<HTMLDivElement>(null);
-
-  // Performance monitoring in development
-  useRenderPerformance('MainLayout');
-
-  // Apply layout optimizations
-  useEffect(() => {
-    if (layoutRef.current) {
-      // Prevent layout shifts in main content area
-      LayoutStabilizer.applyContainment(layoutRef.current, 'layout');
-      
-      // Load non-critical CSS dynamically
-      DynamicCSSLoader.loadCSS('/styles/non-critical.css', {
-        priority: 'low',
-        media: 'all'
-      });
-    }
-  }, []);
-
+  const location = useLocation();
   
+  const isProjectView = location.pathname.includes('/projects/') && 
+                       !location.pathname.endsWith('/projects');
 
-  // Memoize styles to prevent object recreation on every render
-  const headerStyles = useMemo(
-    () => ({
-      zIndex: 999,
-      position: 'fixed' as const,
-      width: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      padding: 0,
-      borderBottom: themeMode === 'dark' ? '1px solid #303030' : 'none',
-    }),
-    [themeMode]
-  );
-
-  const contentStyles = useMemo(
-    () => ({
-      paddingInline: isDesktop ? 64 : 24,
-      overflowX: 'hidden' as const,
-    }),
-    [isDesktop]
-  );
-
-  // Memoize theme configuration
   const themeConfig = useMemo(
     () => ({
       components: {
@@ -69,23 +25,19 @@ const MainLayout = memo(() => {
     [themeMode]
   );
 
-  // Memoize header className
-  const headerClassName = useMemo(
-    () => `shadow-md ${themeMode === 'dark' ? '' : 'shadow-[#18181811]'}`,
-    [themeMode]
-  );
-
   return (
     <ConfigProvider theme={themeConfig}>
-      <Layout ref={layoutRef} style={{ minHeight: '100vh' }} className="prevent-layout-shift">
-        <Layout.Header className={`${headerClassName} gpu-accelerated`} style={headerStyles}>
+      <Layout className="min-h-screen">
+        <Layout.Header 
+          className={`sticky top-0 z-[999] flex items-center p-0 shadow-md ${
+            themeMode === 'dark' ? 'border-b border-[#303030]' : 'shadow-[#18181811]'
+          }`}
+        >
           <Navbar />
         </Layout.Header>
 
-        <Layout.Content className="layout-contained">
-          <Col xxl={{ span: 18, offset: 3, flex: '100%' }} style={contentStyles} className="task-content-container">
-            <Outlet />
-          </Col>
+        <Layout.Content className={`px-4 sm:px-8 lg:px-12 xl:px-16 ${!isProjectView ? 'overflow-x-hidden max-w-[1400px]' : ''} mx-auto w-full`}>
+          <Outlet />
         </Layout.Content>
       </Layout>
     </ConfigProvider>