mobile optimisations - hide more elements when in mobile mode

packages/nc-gui/components/smartsheet/Toolbar.vue

@@ -5,6 +5,8 @@ const { isGrid, isForm, isGallery, isKanban, isSqlView } = useSmartsheetStoreOrT
 
 const isPublic = inject(IsPublicInj, ref(false))
 
+const { isMobileMode } = useGlobal()
+
 const { isUIAllowed } = useUIPermission()
 
 const { isOpen } = useSidebar('nc-right-sidebar')
@@ -45,7 +47,7 @@ const { allowCSVDownload } = useSharedView()
 
     <LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery || isKanban) && !isPublic" class="shrink mx-2" />
 
-    <template v-if="!isOpen && !isPublic">
+    <template v-if="!isOpen && !isPublic && !isMobileMode">
       <div class="border-l-1 pl-3">
         <LazySmartsheetSidebarToolbarToggleDrawer class="mr-2" />
       </div>

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -31,6 +31,8 @@ const { isUIAllowed } = useUIPermission()
 
 const { metas } = useMetas()
 
+const { isMobileMode } = useGlobal()
+
 const activeTab = toRef(props, 'activeTab')
 
 const activeView = ref()
@@ -96,7 +98,7 @@ const onDecode = () => {
     <LazySmartsheetExpandedFormDetached />
 
     <!-- Lazy loading the sidebar causes issues when deleting elements, i.e. it appears as if multiple elements are removed when they are not -->
-    <SmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
+    <SmartsheetSidebar v-if="meta && !isMobileMode" class="nc-right-sidebar" />
   </div>
 </template>
 

packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

@@ -6,7 +6,7 @@ import { TabMetaInj, iconMap, provide, useGlobal, useSidebar, useTabs } from '#i
 
 const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
 
-const { isLoading } = useGlobal()
+const { isLoading, isMobileMode } = useGlobal()
 
 provide(TabMetaInj, activeTab)
 
@@ -83,7 +83,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
         </div>
 
         <LazyGeneralShareBaseButton />
-        <LazyGeneralFullScreen class="nc-fullscreen-icon" />
+        <LazyGeneralFullScreen v-if="!isMobileMode" class="nc-fullscreen-icon" />
       </div>
 
       <div class="w-full min-h-[300px] flex-auto">