From 23edbfa7d27c00b01ab20507c5fbdd00f541b18d Mon Sep 17 00:00:00 2001
From: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>
Date: Mon, 13 Apr 2026 10:30:47 +0700
Subject: [PATCH] #772 fix scroll issue on mobile

---
 package-lock.json                          |  7 +++++++
 package.json                               |  1 +
 src/App.styl                               |  4 ++++
 src/components/Calendar/CalendarLayout.tsx |  3 ++-
 src/components/Menubar/Menubar.styl        |  5 +++++
 src/components/Menubar/MobileMenuBar.tsx   |  2 +-
 src/declarations.ts                        | 17 +++++++++++++++++
 7 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c225073..8560436 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 748bdca..018ba8f 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.styl b/src/App.styl
index 6d98d04..984952b 100644
--- a/src/App.styl
+++ b/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
diff --git a/src/components/Calendar/CalendarLayout.tsx b/src/components/Calendar/CalendarLayout.tsx
index 53a14d9..d1d3482 100644
--- a/src/components/Calendar/CalendarLayout.tsx
+++ b/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
diff --git a/src/components/Menubar/Menubar.styl b/src/components/Menubar/Menubar.styl
index bcfbdd2..415310c 100644
--- a/src/components/Menubar/Menubar.styl
+++ b/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
diff --git a/src/components/Menubar/MobileMenuBar.tsx b/src/components/Menubar/MobileMenuBar.tsx
index 5116353..81a8d5f 100644
--- a/src/components/Menubar/MobileMenuBar.tsx
+++ b/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}
diff --git a/src/declarations.ts b/src/declarations.ts
index 9a22528..b47387c 100644
--- a/src/declarations.ts
+++ b/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'