refactor: Improve mobile responsiveness and scrolling behavior in UI layout

web/src/components/PageLayout.js

@@ -84,7 +84,11 @@ const PageLayout = () => {
       }}>
         <HeaderBar />
       </Header>
-      <Layout style={{ marginTop: '56px', height: 'calc(100vh - 56px)', overflow: 'hidden' }}>
+      <Layout style={{ 
+        marginTop: '56px', 
+        height: 'calc(100vh - 56px)', 
+        overflow: styleState.isMobile ? 'auto' : 'hidden' 
+      }}>
         {styleState.showSider && (
           <Sider style={{ 
             height: 'calc(100vh - 56px)', 
@@ -105,13 +109,17 @@ const PageLayout = () => {
         )}
         <Layout style={{ 
           marginLeft: styleState.showSider ? (isSidebarCollapsed ? '60px' : '200px') : '0', 
-          transition: 'margin-left 0.3s ease'
+          transition: 'margin-left 0.3s ease',
+          height: '100%',
+          overflow: 'auto'
         }}>
           <Content
             style={{ 
               height: '100%',
               overflowY: 'auto', 
-              padding: styleState.shouldInnerPadding? '24px': '0' 
+              WebkitOverflowScrolling: 'touch',
+              padding: styleState.shouldInnerPadding? '24px': '0',
+              position: 'relative'
             }}
           >
             <App />

web/src/components/SiderBar.js

@@ -305,7 +305,9 @@ const SiderBar = () => {
           borderRadius: '0 8px 8px 0',
           transition: 'all 0.3s ease',
           position: 'relative',
-          zIndex: 95
+          zIndex: 95,
+          overflowY: 'auto',
+          WebkitOverflowScrolling: 'touch' // Improve scrolling on iOS devices
         }}
         defaultIsCollapsed={
           localStorage.getItem('default_collapse_sidebar') === 'true'

web/src/context/Style/index.js

@@ -9,7 +9,7 @@ export const StyleContext = React.createContext({
 
 export const StyleProvider = ({ children }) => {
   const [state, setState] = useState({
-    isMobile: false,
+    isMobile: isMobile(),
     showSider: false,
     shouldInnerPadding: false,
   });
@@ -39,7 +39,13 @@ export const StyleProvider = ({ children }) => {
 
   useEffect(() => {
     const updateIsMobile = () => {
-      dispatch({ type: 'SET_MOBILE', payload: isMobile() });
+      const mobileDetected = isMobile();
+      dispatch({ type: 'SET_MOBILE', payload: mobileDetected });
+      
+      // If on mobile, we might want to auto-hide the sidebar
+      if (mobileDetected && state.showSider) {
+        dispatch({ type: 'SET_SIDER', payload: false });
+      }
     };
 
     updateIsMobile();
@@ -51,24 +57,24 @@ export const StyleProvider = ({ children }) => {
         dispatch({ type: 'SET_SIDER', payload: false });
         dispatch({ type: 'SET_INNER_PADDING', payload: false });
       } else {
-        dispatch({ type: 'SET_SIDER', payload: true });
+        // Only show sidebar on non-mobile devices by default
+        dispatch({ type: 'SET_SIDER', payload: !isMobile() });
         dispatch({ type: 'SET_INNER_PADDING', payload: true });
       }
-
-      if (isMobile()) {
-        dispatch({ type: 'SET_SIDER', payload: false });
-      }
     };
 
-    updateShowSider()
+    updateShowSider();
 
+    // Add event listeners to handle window resize
+    const handleResize = () => {
+      updateIsMobile();
+    };
     
-    // Optionally, add event listeners to handle window resize
+    window.addEventListener('resize', handleResize);
-    window.addEventListener('resize', updateIsMobile);
 
     // Cleanup event listener on component unmount
     return () => {
-      window.removeEventListener('resize', updateIsMobile);
+      window.removeEventListener('resize', handleResize);
     };
   }, []);