fix: kanban issues drag

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

@@ -8,6 +8,7 @@ import {
   DropZoneRef,
   IsExpandedFormOpenInj,
   IsGalleryInj,
+  IsKanbanInj,
   RowHeightInj,
   iconMap,
   inject,
@@ -46,6 +47,8 @@ const isLockedMode = inject(IsLockedInj, ref(false))
 
 const isGallery = inject(IsGalleryInj, ref(false))
 
+const isKanban = inject(IsKanbanInj, ref(false))
+
 const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
 
 const { isSharedForm } = useSmartsheetStoreOrThrow()!
@@ -223,7 +226,7 @@ const onExpand = () => {
     <template v-if="visibleItems.length">
       <div
         ref="sortableRef"
-        :class="{ 'justify-center': !isExpandedForm && !isGallery }"
+        :class="{ 'justify-center': !isExpandedForm && !isGallery && !isKanban }"
         class="flex cursor-pointer w-full items-center flex-wrap gap-2 py-1.5 scrollbar-thin-dull overflow-hidden mt-0 items-start"
         :style="{
           maxHeight: isForm || isExpandedForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,

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

@@ -56,6 +56,8 @@ const expandedFormRow = ref<RowType>()
 
 const expandedFormRowState = ref<Record<string, any>>()
 
+provide(RowHeightInj, ref(1 as const))
+
 const deleteStackVModel = ref(false)
 
 const stackToBeDeleted = ref('')
@@ -211,6 +213,8 @@ const expandedFormOnRowIdDlg = computed({
 })
 
 const expandFormClick = async (e: MouseEvent, row: RowType) => {
+  const target = e.target as HTMLElement
+  if (target.closest('.arrow') || target.closest('.slick-dots')) return
   if (e.target as HTMLElement) {
     expandForm(row)
   }
@@ -784,4 +788,34 @@ watch(
   transform-origin: left top 0px;
   transition: left 0.2s ease-in-out 0s;
 }
+
+
+:deep(.slick-dots li button) {
+  @apply !bg-black;
+}
+
+.ant-carousel.gallery-carousel :deep(.slick-dots) {
+  @apply !w-auto absolute h-auto bottom-[-15px] absolute h-auto;
+  height: auto;
+}
+
+.ant-carousel.gallery-carousel :deep(.slick-dots li div > div) {
+  @apply rounded-full border-0 cursor-pointer block opacity-100 p-0 outline-none transition-all duration-500 text-transparent h-2 w-2 bg-[#d9d9d9];
+  font-size: 0;
+}
+
+.ant-carousel.gallery-carousel :deep(.slick-dots li.slick-active div > div) {
+  @apply bg-brand-500 opacity-100;
+}
+
+.ant-carousel.gallery-carousel :deep(.slick-dots li) {
+  @apply !w-auto;
+}
+.ant-carousel.gallery-carousel :deep(.slick-prev) {
+  @apply left-0;
+}
+
+.ant-carousel.gallery-carousel :deep(.slick-next) {
+  @apply right-0;
+}
 </style>