feat: Moved max mobile width size to a const

packages/nc-gui/lib/constants.ts

@@ -4,6 +4,8 @@ export const SYSTEM_COLUMNS = ['id', 'title', 'created_at', 'updated_at']
 
 export const EMPTY_TITLE_PLACEHOLDER_DOCS = 'Untitled'
 
+export const MAX_WIDTH_FOR_MOBILE_MODE = 480
+
 export const BASE_FALLBACK_URL = process.env.NODE_ENV === 'production' ? '..' : 'http://localhost:8080'
 
 export const GROUP_BY_VARS = {

packages/nc-gui/store/config.ts

@@ -1,14 +1,17 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { isViewPortMobile } from '~/utils'
+import { MAX_WIDTH_FOR_MOBILE_MODE } from '~/lib'
 
 export const useConfigStore = defineStore('configStore', () => {
   const { isMobileMode: globalIsMobile } = useGlobal()
+  const { width } = useWindowSize()
 
   const sidebarStore = useSidebarStore()
   const viewsStore = useViewsStore()
   const tablesStore = useTablesStore()
 
-  const isMobileMode = ref(window.innerWidth < 820)
+  const isViewPortMobile = () => width.value < MAX_WIDTH_FOR_MOBILE_MODE
+
+  const isMobileMode = ref(isViewPortMobile())
 
   const onViewPortResize = () => {
     isMobileMode.value = isViewPortMobile()

packages/nc-gui/store/sidebar.ts

@@ -1,7 +1,10 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { isViewPortMobile } from '~/utils'
+import { MAX_WIDTH_FOR_MOBILE_MODE } from '~/lib'
 
 export const useSidebarStore = defineStore('sidebarStore', () => {
+  const { width } = useWindowSize()
+  const isViewPortMobile = () => width.value < MAX_WIDTH_FOR_MOBILE_MODE
+
   const isLeftSidebarOpen = ref(!isViewPortMobile())
   const isRightSidebarOpen = ref(true)
 

packages/nc-gui/utils/index.ts

@@ -27,5 +27,3 @@ export * from './workerUtils'
 export * from './parsersUtils'
 
 export const isEeUI = false
-
-export const isViewPortMobile = () => window.innerWidth < 820