Merge pull request #773 from lethemanh/772-fix-scroll-issue-on-mobile

#772 fix scroll issue on mobile

src/App.styl

@@ -3,6 +3,10 @@
   font-family "Roboto"
   height 100vh
 
+  &--mobile
+    height 100dvh
+    overflow-y hidden
+
 .App-header
   background-color #282c34
   min-height 100vh

src/components/Calendar/CalendarLayout.tsx

@@ -1,3 +1,4 @@
+import cx from 'classnames'
 import { useAppDispatch, useAppSelector } from '@/app/hooks'
 import SettingsPage from '@/features/Settings/SettingsPage'
 import { useScreenSizeDetection } from '@/useScreenSizeDetection'
@@ -106,7 +107,7 @@ export default function CalendarLayout(): JSX.Element {
   }
 
   return (
-    <div className="App">
+    <div className={cx('App ', { 'App--mobile': isMobile })}>
       {!isInIframe && <Menubar {...menubarProps} />}
       {(view === 'calendar' || view === 'search') && (
         <CalendarApp

src/components/Menubar/Menubar.styl

@@ -42,6 +42,11 @@
   min-height 60px
   background-color #fff
 
+  &--mobile
+    position sticky
+    top 0
+    margin-bottom 8px
+
 .menubar-item
   display flex
   align-items center

src/components/Menubar/MobileMenuBar.tsx

@@ -48,7 +48,7 @@ export const MobileMenubar: React.FC<MobileMenubarProps> = ({
 
   return (
     <>
-      <header className="menubar">
+      <header className="menubar menubar--mobile">
         <div className="left-menu">
           <IconButton
             onClick={onOpenSidebar}

src/declarations.ts

@@ -1,5 +1,22 @@
 declare module '*.styl'
 
+declare module 'classnames' {
+  type ClassValue =
+    | string
+    | number
+    | boolean
+    | null
+    | undefined
+    | ClassArray
+    | ClassDictionary
+  interface ClassDictionary {
+    [id: string]: boolean | undefined | null
+  }
+  type ClassArray = ClassValue[]
+  function classnames(...args: ClassValue[]): string
+  export = classnames
+}
+
 declare module '@linagora/twake-mui' {
   export * from '@mui/material'