#772 fix scroll issue on mobile

package-lock.json

@@ -24,6 +24,7 @@
         "@mui/x-date-pickers": "^8.14.0",
         "@reduxjs/toolkit": "^2.8.2",
         "@sentry/react": "^8.55.1",
+        "classnames": "^2.5.1",
         "cozy-external-bridge": "^1.2.1",
         "date-fns": "^4.1.0",
         "dayjs": "^1.11.19",
@@ -6284,6 +6285,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/cli-boxes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "@mui/x-date-pickers": "^8.14.0",
     "@reduxjs/toolkit": "^2.8.2",
     "@sentry/react": "^8.55.1",
+    "classnames": "^2.5.1",
     "cozy-external-bridge": "^1.2.1",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.19",

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'