diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss index a17cc73f88..b9d6529c4a 100644 --- a/packages/nc-gui/assets/style.scss +++ b/packages/nc-gui/assets/style.scss @@ -57,7 +57,7 @@ main { } .mobile { - .nc-scrollbar-md, .nc-scrollbar-x-md, .nc-scrollbar-dark-md, .nc-scrollbar-x-md-dark, .nc-scrollbar-x-lg { + .nc-scrollbar-md, .nc-scrollbar-lg, .nc-scrollbar-x-md, .nc-scrollbar-dark-md, .nc-scrollbar-x-md-dark, .nc-scrollbar-x-lg { &::-webkit-scrollbar { width: 0px; } @@ -88,6 +88,30 @@ main { } } +.nc-scrollbar-lg { + overflow-y: scroll; + overflow-x: hidden; + scrollbar-width: thin !important; + + &::-webkit-scrollbar { + width: 10px; + height: 10px; + } + &::-webkit-scrollbar-track-piece { + width: 0px; + } + &::-webkit-scrollbar { + @apply bg-transparent; + } + &::-webkit-scrollbar-thumb { + width: 4px; + @apply bg-gray-200; + } + &::-webkit-scrollbar-thumb:hover { + @apply bg-gray-300; + } +} + .nc-scrollbar-x-md { overflow-x: scroll; scrollbar-width: thin !important; diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue index 054f29ca31..c9a73f0cf2 100644 --- a/packages/nc-gui/components/cell/RichText.vue +++ b/packages/nc-gui/components/cell/RichText.vue @@ -19,6 +19,8 @@ const props = defineProps<{ const emits = defineEmits(['update:value']) +const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))! + const turndownService = new TurndownService({}) turndownService.addRule('lineBreak', { @@ -171,7 +173,8 @@ watch(editorDom, () => { class="flex flex-col nc-textarea-rich-editor w-full" :class="{ 'ml-1 mt-2.5 flex-grow': props.fullMode, - 'nc-scrollbar-md': !props.fullMode && !props.readonly, + 'nc-scrollbar-md': (!props.fullMode && !props.readonly) || isExpandedFormOpen, + 'flex-grow': isExpandedFormOpen, }" /> diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue index ab815cd3d8..d2016b5d4d 100644 --- a/packages/nc-gui/components/cell/TextArea.vue +++ b/packages/nc-gui/components/cell/TextArea.vue @@ -58,6 +58,8 @@ const isDragging = ref(false) const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLTextAreaElement)?.focus() const height = computed(() => { + if (isExpandedFormOpen.value) return 36 * 4 + if (!rowHeight.value || rowHeight.value === 1) return 36 return rowHeight.value * 36 @@ -169,16 +171,16 @@ watch(editEnabled, () => {