Merge pull request #6723 from nocodb/nc-fix/mobile-followup

Mobile followup

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

@@ -43,6 +43,8 @@ const { modelValue, disableOptionCreation } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const { isMobileMode } = useGlobal()
+
 const column = inject(ColumnInj)!
 
 const readOnly = inject(ReadonlyInj)!
@@ -383,7 +385,7 @@ const selectedOpts = computed(() => {
       :placeholder="isEditColumn ? $t('labels.optional') : ''"
       :bordered="false"
       clear-icon
-      show-search
+      :show-search="!isMobileMode"
       :show-arrow="editAllowed && !(readOnly || isLockedMode)"
       :open="isOpen && editAllowed"
       :disabled="readOnly || !editAllowed || isLockedMode"
@@ -392,6 +394,9 @@ const selectedOpts = computed(() => {
       @search="search"
       @keydown.stop
     >
+      <template #suffixIcon>
+        <GeneralIcon icon="arrowDown" class="text-gray-700 nc-select-expand-btn" />
+      </template>
       <a-select-option
         v-for="op of options"
         :key="op.id || op.title"

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

@@ -37,6 +37,8 @@ const { modelValue, disableOptionCreation } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const { isMobileMode } = useGlobal()
+
 const column = inject(ColumnInj)!
 
 const readOnly = inject(ReadonlyInj)!
@@ -202,6 +204,8 @@ async function addIfMissingAndSave() {
 }
 
 const search = () => {
+  if (isMobileMode.value) return
+
   searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
 }
 
@@ -285,7 +289,7 @@ const selectedOpt = computed(() => {
       v-else
       ref="aselect"
       v-model:value="vModel"
-      class="w-full overflow-hidden"
+      class="w-full overflow-hidden xs:min-h-12"
       :class="{ 'caret-transparent': !hasEditRoles }"
       :placeholder="isEditColumn ? $t('labels.optional') : ''"
       :allow-clear="!column.rqd && editAllowed"
@@ -294,7 +298,7 @@ const selectedOpt = computed(() => {
       :disabled="readOnly || !editAllowed || isLockedMode"
       :show-arrow="hasEditRoles && !(readOnly || isLockedMode) && active && vModel === null"
       :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen && active ? 'active' : ''}`"
-      :show-search="isOpen && active"
+      :show-search="!isMobileMode && isOpen && active"
       @select="onSelect"
       @keydown="onKeydown($event)"
       @search="search"

packages/nc-gui/components/cell/attachment/Carousel.vue

@@ -55,7 +55,7 @@ useEventListener(container, 'click', (e) => {
 <template>
   <GeneralOverlay v-model="selectedImage" :z-index="1001" class="bg-gray-500 bg-opacity-50">
     <template v-if="selectedImage">
-      <div ref="container" class="overflow-hidden p-12 text-center relative">
+      <div ref="container" class="overflow-hidden p-12 text-center relative xs:h-screen">
         <div class="text-white group absolute top-5 right-5">
           <component
             :is="iconMap.closeCircle"

packages/nc-gui/components/cell/attachment/index.vue

@@ -152,14 +152,18 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
 
 const rowHeight = inject(RowHeightInj, ref())
 
-const open = () => {
-  if (isMobileMode.value) return (isExpandedForm.value = true)
+const open = (e: Event) => {
+  e.stopPropagation()
 
   _open()
 }
 
 const openAttachment = (item: any) => {
-  if (isMobileMode.value) return
+  if (isMobileMode.value && !isExpandedForm.value) {
+    isExpandedForm.value = true
+
+    return
+  }
 
   _openAttachment(item)
 }
@@ -169,6 +173,14 @@ const onExpand = () => {
 
   modalVisible.value = true
 }
+
+const onImageClick = (item: any) => {
+  if (isMobileMode.value && !isExpandedForm.value) return
+
+  if (!isMobileMode.value && (isGallery.value || (isKanban.value && !isExpandedForm.value))) return
+
+  selectedImage.value = item
+}
 </script>
 
 <template>
@@ -178,7 +190,7 @@ const onExpand = () => {
     :style="{
       height: isForm || isExpandedForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
     }"
-    class="nc-attachment-cell relative flex color-transition flex items-center w-full"
+    class="nc-attachment-cell relative flex color-transition flex items-center w-full xs:(min-h-12 max-h-32)"
     :class="{ 'justify-center': !active, 'justify-between': active }"
   >
     <LazyCellAttachmentCarousel />
@@ -198,26 +210,29 @@ const onExpand = () => {
 
     <div
       v-if="!isReadonly"
-      :class="{ 'mx-auto px-4': !visibleItems.length }"
+      :class="{ 'sm:(mx-auto px-4) xs:(w-full min-w-8)': !visibleItems.length }"
       class="group cursor-pointer py-1 flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-none shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       data-testid="attachment-cell-file-picker-button"
-      @click.stop="open"
+      @click="open"
     >
       <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
-      <NcTooltip placement="bottom">
+      <NcTooltip placement="bottom" class="xs:w-full">
         <template #title
           ><span data-rec="true">{{ $t('activity.attachmentDrop') }} </span></template
         >
 
-        <div v-if="active || !visibleItems.length || (isForm && visibleItems.length)" class="flex items-center gap-1">
+        <div
+          v-if="active || !visibleItems.length || (isForm && visibleItems.length)"
+          class="flex items-center gap-1 xs:(w-full min-w-12 h-8 justify-center)"
+        >
           <MaterialSymbolsAttachFile
             class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
           />
           <div
             v-if="!visibleItems.length"
             data-rec="true"
-            class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs"
+            class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs xs:(justify-center rounded-lg text-sm)"
           >
             {{ $t('activity.addFiles') }}
           </div>
@@ -245,12 +260,7 @@ const onExpand = () => {
               <div
                 class="nc-attachment flex items-center flex-col flex-wrap justify-center"
                 :class="{ 'ml-2': active }"
-                @click="
-                  () => {
-                    if (isGallery || isMobileMode || (isKanban && !isExpandedForm)) return
-                    selectedImage = item
-                  }
-                "
+                @click="() => onImageClick(item)"
               >
                 <LazyCellAttachmentImage
                   :alt="item.title || `#${i}`"
@@ -281,7 +291,7 @@ const onExpand = () => {
 
       <div
         v-if="active || (isForm && visibleItems.length)"
-        class="h-6 w-5 group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-none p-1 hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+        class="xs:hidden h-6 w-5 group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-none p-1 hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       >
         <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 

packages/nc-gui/components/dashboard/Sidebar.vue

@@ -47,7 +47,7 @@ onUnmounted(() => {
     </div>
     <div
       ref="treeViewDom"
-      class="flex flex-col nc-scrollbar-dark-md flex-grow xs:(border-transparent pt-2)"
+      class="flex flex-col nc-scrollbar-dark-md flex-grow xs:(border-transparent pt-2 pr-2)"
       :class="{
         'border-t-1': !isSharedBase,
         'border-transparent': !isTreeViewOnScrollTop,

packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@@ -182,7 +182,7 @@ const isTableOpened = computed(() => {
               :class="{ '!rotate-180': isExpanded }"
             />
           </NcButton>
-          <div v-else class="min-w-5.75"></div>
+          <div v-else class="sm:min-w-5.75 xs:min-w-7.5 h-2"></div>
           <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
             <div
               class="flex items-center nc-table-icon"

packages/nc-gui/components/nc/Select.vue

@@ -55,6 +55,16 @@ const onChange = (value: string) => {
 </template>
 
 <style lang="scss">
+.ant-select-item {
+  @apply !xs:h-13;
+}
+.ant-select-item-option-content {
+  @apply !xs:mt-2.5;
+}
+.ant-select-item-option-state {
+  @apply !xs:mt-1.75;
+}
+
 .nc-select.ant-select {
   height: fit-content;
   .ant-select-selector {

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

@@ -593,11 +593,11 @@ export default {
                 <div class="w-[12rem] xs:(w-full) mt-0.25 !h-[35px]">
                   <LazySmartsheetHeaderVirtualCell
                     v-if="isVirtualCol(col)"
-                    class="nc-expanded-cell-header h-full !text-gray-500"
+                    class="nc-expanded-cell-header h-full"
                     :column="col"
                   />
 
-                  <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header !text-gray-500" :column="col" />
+                  <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" />
                 </div>
 
                 <template v-if="isLoading">
@@ -616,7 +616,7 @@ export default {
                   <SmartsheetDivDataCell
                     v-if="col.title"
                     :ref="i ? null : (el: any) => (cellWrapperEl = el)"
-                    class="!bg-white rounded-lg !w-[20rem] !xs:w-full border-1 border-gray-200 overflow-hidden px-1 min-h-[35px] flex items-center relative"
+                    class="!bg-white rounded-lg !w-[20rem] !xs:w-full border-1 border-gray-200 overflow-hidden px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
                   >
                     <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="_row.row[col.title]" :row="_row" :column="col" />
 
@@ -674,7 +674,7 @@ export default {
                     <LazySmartsheetDivDataCell
                       v-if="col.title"
                       :ref="i ? null : (el: any) => (cellWrapperEl = el)"
-                      class="!bg-white rounded-lg !w-[20rem] border-1 overflow-hidden border-gray-200 px-1 min-h-[35px] flex items-center relative"
+                      class="!bg-white rounded-lg !w-[20rem] border-1 overflow-hidden border-gray-200 px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
                     >
                       <LazySmartsheetVirtualCell
                         v-if="isVirtualCol(col)"
@@ -811,7 +811,7 @@ export default {
 }
 
 .nc-expanded-cell-header {
-  @apply w-full text-gray-700 xs:mb-2;
+  @apply w-full text-gray-500 xs:(text-gray-600 mb-2);
 }
 
 .nc-expanded-cell-header > :nth-child(2) {
@@ -825,3 +825,13 @@ export default {
   @apply !p-0;
 }
 </style>
+
+<style lang="scss" scoped>
+:deep(.ant-select-selector) {
+  @apply !xs:(h-full);
+}
+
+:deep(.ant-select-selection-item) {
+  @apply !xs:(mt-1.75 ml-1);
+}
+</style>