Nc fix/mobile view bug fixes (#8670)

* fix(nc-gui): small screen expanded form create record btn alignment

* fix(nc-gui): update grid view mobile screen height

* fix(nc-gui): gallery view footer issue in mobile view

* fix(nc-gui): single select field height issue in expanded form mobile view

* fix(nc-gui): allow emoji icon display support in place of view icon if configured

* fix(nc-gui): shared view footer visibility issue in mobile screen

* fix(nc-gui): update nc-container height for mobile screen

* fix(nc-gui): check for support of dvh unit and then apply css

packages/nc-gui/components/cell/SingleSelect.vue

@@ -385,7 +385,7 @@ const onFocus = () => {
         v-else
         ref="aselect"
         v-model:value="vModel"
-        class="w-full overflow-hidden xs:min-h-12"
+        class="w-full overflow-hidden"
         :class="{ 'caret-transparent': !hasEditRoles }"
         :allow-clear="!column.rqd && editAllowed"
         :bordered="false"

packages/nc-gui/components/general/EmojiPicker.vue

@@ -6,7 +6,7 @@ import { EmojiIndex, Picker } from 'emoji-mart-vue-fast/src'
 
 const props = defineProps<{
   emoji?: string | undefined
-  size?: 'small' | 'medium' | 'large' | 'xlarge'
+  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
   readonly?: boolean
   disableClearing?: boolean
 }>()
@@ -80,10 +80,11 @@ const showClearButton = computed(() => {
 <template>
   <a-dropdown v-model:visible="isOpen" :trigger="['click']" :disabled="readonly">
     <div
-      class="flex flex-row justify-center items-center select-none rounded-md nc-emoji"
+      class="flex-none flex flex-row justify-center items-center select-none rounded-md nc-emoji"
       :class="{
         'hover:bg-gray-500 hover:bg-opacity-15 cursor-pointer': !readonly,
         'bg-gray-500 bg-opacity-15': isOpen,
+        'h-4 w-4 text-[16px] leading-4': size === 'xsmall',
         'h-6 w-6 text-lg': size === 'small',
         'h-8 w-8 text-xl': size === 'medium',
         'h-10 w-10 text-2xl': size === 'large',

packages/nc-gui/components/general/ViewIcon.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { Icon as IcIcon } from '@iconify/vue'
 import type { TableType } from 'nocodb-sdk'
 
 const props = defineProps<{
@@ -11,11 +10,12 @@ const viewMeta = toRef(props, 'meta')
 </script>
 
 <template>
-  <IcIcon
+  <LazyGeneralEmojiPicker
     v-if="viewMeta?.meta?.icon"
-    :data-testid="`nc-icon-${viewMeta?.meta?.icon}`"
-    class="text-[16px]"
-    :icon="viewMeta?.meta?.icon"
+    :data-testid="`nc-emoji-${viewMeta.meta?.icon}`"
+    size="xsmall"
+    :emoji="viewMeta.meta?.icon"
+    readonly
   />
   <component
     :is="viewIcons[viewMeta.type]?.icon"

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

@@ -46,6 +46,8 @@ const router = useRouter()
 
 const { getPossibleAttachmentSrc } = useAttachment()
 
+const { isMobileMode } = useGlobal()
+
 const fieldsWithoutDisplay = computed(() => fields.value.filter((f) => !isPrimary(f)))
 
 const displayField = computed(() => meta.value?.columns?.find((c) => c.pv && fields.value.includes(c)) ?? null)
@@ -207,7 +209,7 @@ watch(
     <div
       class="flex flex-col w-full nc-gallery nc-scrollbar-md bg-gray-50"
       data-testid="nc-gallery-wrapper"
-      style="height: calc(100% - var(--topbar-height) + 0.7rem)"
+      :style="{ height: isMobileMode ? 'calc(100% - var(--topbar-height))' : 'calc(100% - var(--topbar-height) + 0.7rem)' }"
       :class="{
         '!overflow-hidden': isViewDataLoading,
       }"

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

@@ -70,7 +70,7 @@ const { isViewDataLoading } = storeToRefs(useViewsStore())
 
 const { isUIAllowed } = useRoles()
 
-const { appInfo } = useGlobal()
+const { appInfo, isMobileMode } = useGlobal()
 
 const { addUndo, defineViewScope } = useUndoRedo()
 
@@ -372,18 +372,18 @@ const getRowId = (row: RowType) => {
 
 <template>
   <div
-    class="flex flex-col w-full bg-white"
+    class="flex flex-col w-full bg-white h-full"
     data-testid="nc-kanban-wrapper"
     :style="{
-      minHeight: 'calc(100vh - var(--topbar-height))',
+      minHeight: 'calc(100% - var(--topbar-height))',
     }"
   >
     <div
       ref="kanbanContainerRef"
       class="nc-kanban-container flex mt-4 pb-4 px-4 overflow-y-hidden w-full nc-scrollbar-x-lg"
       :style="{
-        minHeight: 'calc(100vh - var(--topbar-height) - 4.1rem)',
-        maxHeight: 'calc(100vh - var(--topbar-height) - 4.1rem)',
+        minHeight: isMobileMode ? 'calc(100%  - 2rem)' : 'calc(100vh - var(--topbar-height) - 4.1rem)',
+        maxHeight: isMobileMode ? 'calc(100%  - 2rem)' : 'calc(100vh - var(--topbar-height) - 4.1rem)',
       }"
     >
       <div v-if="isViewDataLoading" class="flex flex-row min-h-full gap-x-2">
@@ -733,7 +733,12 @@ const getRowId = (row: RowType) => {
         </template>
       </a-dropdown>
     </div>
-    <LazySmartsheetPagination v-model:pagination-data="emptyPagination" align-count-on-right hide-pagination class="!py-4">
+    <LazySmartsheetPagination
+      v-model:pagination-data="emptyPagination"
+      align-count-on-right
+      hide-pagination
+      class="!py-4 h-10 !xs:py-0"
+    >
     </LazySmartsheetPagination>
   </div>
 

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -921,7 +921,7 @@ export default {
                 </template>
               </NcDropdown>
             </div>
-
+            <div v-if="isNew && isMobileMode"></div>
             <div v-if="isMobileMode" class="p-2">
               <NcButton
                 v-e="['c:row-expand:save']"
@@ -1026,9 +1026,6 @@ export default {
   @apply !xs:(h-full);
 }
 
-:deep(.ant-select-selection-item) {
-  @apply !xs:(mt-1.75 ml-1);
-}
 
 .nc-data-cell {
   @apply !rounded-lg;

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

@@ -14,6 +14,8 @@ const { metas, getMeta } = useMetas()
 
 useSidebar('nc-right-sidebar')
 
+const { isMobileMode } = useGlobal()
+
 const activeTab = toRef(props, 'activeTab')
 
 const route = useRoute()
@@ -160,7 +162,10 @@ const onResize = (sizes: { min: number; max: number; size: number }[]) => {
       <Splitpanes v-if="openedViewsTab === 'view'" class="nc-extensions-content-resizable-wrapper" @resized="onResize">
         <Pane class="flex flex-col h-full flex-1 min-w-0" size="60">
           <LazySmartsheetToolbar v-if="!isForm" />
-          <div :style="{ height: isForm ? '100%' : 'calc(100% - var(--toolbar-height))' }" class="flex flex-row w-full">
+          <div
+            :style="{ height: isForm || isMobileMode ? '100%' : 'calc(100% - var(--toolbar-height))' }"
+            class="flex flex-row w-full"
+          >
             <Transition name="layout" mode="out-in">
               <div v-if="openedViewsTab === 'view'" class="flex flex-1 min-h-0 w-3/4">
                 <div class="h-full flex-1 min-w-0 min-h-0 bg-white">

packages/nc-gui/layouts/shared-view.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 const { isLoading, appInfo } = useGlobal()
 
+const { isMobileMode } = storeToRefs(useConfigStore())
+
 const { sharedView, allowCSVDownload } = useSharedView()
 
 const router = useRouter()
@@ -73,7 +75,8 @@ export default {
             </template>
 
             <div v-else class="text-sm font-semibold truncate nc-shared-view-title flex gap-2 items-center">
-              <GeneralViewIcon v-if="sharedView" class="h-4 w-4" :meta="sharedView" />
+              <GeneralViewIcon v-if="sharedView" class="h-4 w-4 ml-0.5" :meta="sharedView" />
+
               <span class="truncate">
                 {{ sharedView?.title }}
               </span>
@@ -89,7 +92,12 @@ export default {
           </a>
         </div>
       </a-layout-header>
-      <div class="w-full overflow-hidden" style="height: calc(100vh - (var(--topbar-height) - 3.6px))">
+      <div
+        class="nc-shared-view-container w-full overflow-hidden"
+        :class="{
+          'nc-shared-mobile-view': isMobileMode,
+        }"
+      >
         <slot />
       </div>
     </a-layout>
@@ -107,5 +115,13 @@ export default {
   :deep(.nc-table-toolbar) {
     @apply px-2;
   }
+
+  .nc-shared-view-container {
+    height: calc(100vh - (var(--topbar-height) - 3.6px));
+
+    @supports (height: 100dvh) {
+      height: calc(100dvh - (var(--topbar-height) - 3.6px));
+    }
+  }
 }
 </style>

packages/nc-gui/pages/index/[typeOrId]/[baseId]/index/index.vue

@@ -23,6 +23,10 @@ useSidebar('nc-left-sidebar')
 .nc-container {
   height: 100vh;
   flex: 1 1 100%;
+
+  @supports (height: 100dvh) {
+    height: 100dvh;
+  }
 }
 
 :deep(.nc-root-tabs) {