From 2012b1c3ca2b05a75900b22f11069369e386314a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Jun 2023 21:59:45 +0530
Subject: [PATCH 1/6] fix: avoid attachment overflow and showing scrollbar

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/attachment/index.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 9a4f2659c3..463e806333 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -192,7 +192,11 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
             </template>
             <div v-if="isImage(item.title, item.mimetype ?? item.type)">
               <div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item">
-                <LazyCellAttachmentImage :alt="item.title || `#${i}`" :srcs="getPossibleAttachmentSrc(item)" />
+                <LazyCellAttachmentImage
+                  class="max-h-full max-w-full"
+                  :alt="item.title || `#${i}`"
+                  :srcs="getPossibleAttachmentSrc(item)"
+                />
               </div>
             </div>
             <div v-else class="nc-attachment flex items-center justify-center" @click="openAttachment(item)">

From c0756eab30cc95ad722d7655927ae297a493f3a7 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Jun 2023 22:07:07 +0530
Subject: [PATCH 2/6] fix: hide system fields from search field filter

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/toolbar/SearchData.vue    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 0612387bf9..9a84f81f14 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { isSystemColumn } from 'nocodb-sdk'
 import type { TableType } from 'nocodb-sdk'
 import {
   ActiveViewInj,
@@ -27,10 +28,14 @@ const searchDropdown = ref(null)
 onClickOutside(searchDropdown, () => (isDropdownOpen.value = false))
 
 const columns = computed(() =>
-  (meta.value as TableType)?.columns?.map((column) => ({
-    value: column.id,
-    label: column.title,
-  })),
+  (meta.value as TableType)?.columns
+    ?.filter((c) => {
+      return !isSystemColumn(c)
+    })
+    .map((column) => ({
+      value: column.id,
+      label: column.title,
+    })),
 )
 
 watch(

From 21c1f20e56dc1c8b50d477286db2521179bde1a6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Jun 2023 22:20:49 +0530
Subject: [PATCH 3/6] refactor: show icon for search column options

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/header/Icon.vue | 11 +++++++++++
 .../components/smartsheet/toolbar/SearchData.vue      | 11 +++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/header/Icon.vue

diff --git a/packages/nc-gui/components/smartsheet/header/Icon.vue b/packages/nc-gui/components/smartsheet/header/Icon.vue
new file mode 100644
index 0000000000..ff56b943ea
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/header/Icon.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { ColumnType, isVirtualCol } from 'nocodb-sdk'
+
+const { column } = defineProps<{ column: ColumnType }>()
+
+</script>
+
+<template>
+  <SmartsheetHeaderVirtualCellIcon v-if="isVirtualCol(column)" :column-meta="column" />
+  <SmartsheetHeaderCellIcon v-else :column-meta="column" />
+</template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 9a84f81f14..da24d397f4 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -35,6 +35,7 @@ const columns = computed(() =>
     .map((column) => ({
       value: column.id,
       label: column.title,
+      column,
     })),
 )
 
@@ -70,10 +71,16 @@ function onPressEnter() {
         :open="isDropdownOpen"
         size="small"
         :dropdown-match-select-width="false"
-        :options="columns"
         dropdown-class-name="!py-0 !rounded nc-dropdown-toolbar-search-field-option"
         class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
-      />
+      >
+        <a-select-option v-for="op of columns" :key="op.value" :value="op.value">
+          <div class="flex items-center -ml-1 gap-2">
+            <SmartsheetHeaderIcon class="" :column="op.column" />
+            {{ op.label }}
+          </div>
+        </a-select-option>
+      </a-select>
     </div>
 
     <a-input

From 8290478d1d2d31e2ad9be187c8957625f888eb8a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 24 Jun 2023 12:15:23 +0530
Subject: [PATCH 4/6] refactor: limit display value in message to 20chars

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/composables/useExpandedFormStore.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index 43a60991cc..1d39f265a1 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -267,7 +267,11 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
         addOrEditStackRow(row.value, isNewRow)
       }
 
-      message.success(`${displayValue.value || 'Row'} updated successfully.`)
+      // trim the display value if greater than 20chars
+      const trimmedDisplayValue =
+        displayValue.value && displayValue.value?.length > 20 ? `${displayValue.value?.substring(0, 20)}...` : displayValue.value
+
+      message.success(`${trimmedDisplayValue || 'Row'} updated successfully.`)
 
       changedColumns.value = new Set()
     } catch (e: any) {

From 844b461cbfd8bc18f956a9027cf7052a6411c803 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 24 Jun 2023 16:45:24 +0530
Subject: [PATCH 5/6] refactor: attachment column item size

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/cell/attachment/index.vue       | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 463e806333..af4f0aefcb 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onKeyDown } from '@vueuse/core'
+import { RowHeightInj } from '~/context'
 import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
 import {
@@ -129,6 +130,10 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
     }
   }
 })
+
+
+const rowHeight = inject(RowHeightInj, ref(1.8))
+
 </script>
 
 <template>
@@ -153,7 +158,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
     <div
       v-if="!isReadonly"
       :class="{ 'mx-auto px-4': !visibleItems.length }"
-      class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+      class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       data-testid="attachment-cell-file-picker-button"
       @click.stop="open"
     >
@@ -162,7 +167,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
       <a-tooltip v-else placement="bottom">
         <template #title> Click or drop a file into cell</template>
 
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-1">
           <MaterialSymbolsAttachFile
             class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
           />
@@ -183,7 +188,10 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
       <div
         ref="sortableRef"
         :class="{ dragging }"
-        class="flex cursor-pointer justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull max-h-[150px] overflow-auto"
+        class="flex cursor-pointer justify-center items-center flex-wrap gap-2 py-1.5 scrollbar-thin-dull overflow-hidden mt-0 items-start"
+        :style="{
+          maxHeight: `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
+        }"
       >
         <template v-for="(item, i) of visibleItems" :key="item.url || item.title">
           <a-tooltip placement="bottom">
@@ -193,7 +201,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
             <div v-if="isImage(item.title, item.mimetype ?? item.type)">
               <div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item">
                 <LazyCellAttachmentImage
-                  class="max-h-full max-w-full"
+                  class="max-h-[1.8rem] max-w-[1.8rem]"
                   :alt="item.title || `#${i}`"
                   :srcs="getPossibleAttachmentSrc(item)"
                 />
@@ -233,7 +241,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
 .nc-cell {
   .nc-attachment-cell {
     .nc-attachment {
-      @apply w-[50px] h-[50px] min-h-[50px] min-w-[50px] ring-1 ring-gray-300 rounded;
+      @apply w-[1.8rem] h-[1.8rem] min-h-[1.8rem] min-w-[1.8rem] ring-1 ring-gray-300 rounded;
     }
 
     .ghost,

From 26fcdde9ea81449c13c603ecb6a847ee44951a53 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Sat, 1 Jul 2023 12:08:14 +0530
Subject: [PATCH 6/6] fix: attach button align center

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui/components/cell/attachment/index.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index af4f0aefcb..69a298927b 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { onKeyDown } from '@vueuse/core'
-import { RowHeightInj } from '~/context'
 import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
+import { RowHeightInj } from '~/context'
 import {
   ActiveCellInj,
   CurrentCellInj,
@@ -131,14 +131,15 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
   }
 })
 
-
 const rowHeight = inject(RowHeightInj, ref(1.8))
-
 </script>
 
 <template>
   <div
     ref="attachmentCellRef"
+    :style="{
+      height: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
+    }"
     class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1"
   >
     <LazyCellAttachmentCarousel />
@@ -158,7 +159,7 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
     <div
       v-if="!isReadonly"
       :class="{ 'mx-auto px-4': !visibleItems.length }"
-      class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+      class="group cursor-pointer py-1 flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       data-testid="attachment-cell-file-picker-button"
       @click.stop="open"
     >
@@ -190,7 +191,7 @@ const rowHeight = inject(RowHeightInj, ref(1.8))
         :class="{ dragging }"
         class="flex cursor-pointer justify-center items-center flex-wrap gap-2 py-1.5 scrollbar-thin-dull overflow-hidden mt-0 items-start"
         :style="{
-          maxHeight: `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
+          maxHeight: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
         }"
       >
         <template v-for="(item, i) of visibleItems" :key="item.url || item.title">