diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue index f447e9dbb5..581517c2a9 100644 --- a/packages/nc-gui/components/cell/RichText.vue +++ b/packages/nc-gui/components/cell/RichText.vue @@ -194,7 +194,7 @@ watch(editorDom, () => { :editor="editor" class="flex flex-col nc-textarea-rich-editor w-full" :class="{ - 'ml-1 mt-2.5 flex-grow': props.fullMode, + 'mt-2.5 flex-grow': props.fullMode, 'nc-scrollbar-md': (!props.fullMode && !props.readonly) || isExpandedFormOpen, 'flex-grow': isExpandedFormOpen, [`!overflow-hidden children:line-clamp-${rowHeight}`]: @@ -232,14 +232,17 @@ watch(editorDom, () => { } .nc-rich-text-full { - @apply px-1.75; + @apply px-3; .ProseMirror { - @apply !p-2 h-[min(797px,100vh_-_170px)]; + @apply !p-2 h-[min(797px,100vh_-_170px)] w-[min(1256px,100vw_-_124px)]; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin !important; + resize: both; min-height: 215px; max-height: min(797px, calc(100vh - 170px)); + min-width: 256px; + max-width: min(1256px, 100vw - 124px); } &.readonly { .ProseMirror { @@ -250,8 +253,8 @@ watch(editorDom, () => { .nc-textarea-rich-editor { .ProseMirror { - @apply flex-grow pt-1 border-1 border-gray-200 rounded-lg pr-1 mr-2; - resize: vertical; + @apply flex-grow pt-1 border-1 border-gray-200 rounded-lg; + > * { @apply ml-1; } diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue index 894cbe1029..9c9a7d9f04 100644 --- a/packages/nc-gui/components/cell/TextArea.vue +++ b/packages/nc-gui/components/cell/TextArea.vue @@ -280,6 +280,7 @@ watch(inputWrapperRef, () => { { :mask-closable="false" :mask-style="{ zIndex: 1051 }" :z-index="1052" - :destroy-on-close="true" >
- +
@@ -337,9 +336,11 @@ textarea:focus { box-shadow: none; } .nc-text-area-expanded { - @apply h-[min(795px,100vh_-_170px)]; + @apply h-[min(795px,100vh_-_170px)] w-[min(1256px,100vw_-_124px)]; max-height: min(795px, 100vh - 170px); + min-width: 256px; + max-width: min(1256px, 100vw - 124px); scrollbar-width: thin !important; &::-webkit-scrollbar-thumb { @apply rounded-lg; @@ -358,14 +359,13 @@ textarea:focus { @apply !w-full h-full !top-0 !mx-auto !my-0; .ant-modal-content { - @apply absolute w-full min-h-70 !p-0 left-[50%] top-[50%]; + @apply absolute w-[fit-content] min-h-70 min-w-70 !p-0 left-[50%] top-[50%]; /* Use 'transform' to center the div correctly */ transform: translate(-50%, -50%); - min-width: min(800px, calc(100vw - 100px)); - max-width: min(1280px, calc(100vw - 100px)); - max-height: min(864px, calc(100vh - 100px)); + max-width: min(1280px, 100vw - 100px); + max-height: min(864px, 100vh - 100px); } } }