Merge pull request #2839 from QuantumNous/fix/sidebar-scroll-dvh

🐛 fix: sidebar scroll on mobile dynamic viewport

web/src/components/layout/PageLayout.jsx

@@ -121,8 +121,8 @@ const PageLayout = () => {
 
 
   return (
   return (
     <Layout
     <Layout
+      className='app-layout'
       style={{
       style={{
-        height: '100vh',
         display: 'flex',
         display: 'flex',
         flexDirection: 'column',
         flexDirection: 'column',
         overflow: isMobile ? 'visible' : 'hidden',
         overflow: isMobile ? 'visible' : 'hidden',
@@ -153,6 +153,7 @@ const PageLayout = () => {
       >
       >
         {showSider && (
         {showSider && (
           <Sider
           <Sider
+            className='app-sider'
             style={{
             style={{
               position: 'fixed',
               position: 'fixed',
               left: 0,
               left: 0,
@@ -160,7 +161,6 @@ const PageLayout = () => {
               zIndex: 99,
               zIndex: 99,
               border: 'none',
               border: 'none',
               paddingRight: '0',
               paddingRight: '0',
-              height: 'calc(100vh - 64px)',
               width: 'var(--sidebar-current-width)',
               width: 'var(--sidebar-current-width)',
             }}
             }}
           >
           >

web/src/index.css

@@ -31,6 +31,16 @@ body {
   background-color: var(--semi-color-bg-0);
   background-color: var(--semi-color-bg-0);
 }
 }
 
 
+.app-layout {
+  height: 100vh;
+  height: 100dvh;
+}
+
+.app-sider {
+  height: calc(100vh - 64px);
+  height: calc(100dvh - 64px);
+}
+
 code {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
     monospace;
@@ -107,6 +117,7 @@ code {
   height: 100%;
   height: 100%;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
+  min-height: 0;
   transition: width 0.3s ease;
   transition: width 0.3s ease;
   background: var(--semi-color-bg-0);
   background: var(--semi-color-bg-0);
 }
 }
@@ -116,9 +127,11 @@ code {
   width: 100%;
   width: 100%;
   background: var(--semi-color-bg-0);
   background: var(--semi-color-bg-0);
   height: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
   border-right: none;
   border-right: none;
   overflow-y: auto;
   overflow-y: auto;
+  min-height: 0;
+  -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   scrollbar-width: none;
   -ms-overflow-style: none;
   -ms-overflow-style: none;
 }
 }