From 948485d1f21affe21c778040b660a76d28878bf3 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 17 Jan 2024 07:24:58 +0000
Subject: [PATCH] fix(nc-gui): long text modal size and rich text bubble menu
 overflow issue

---
 packages/nc-gui/components/cell/RichText.vue     | 16 ++++++++++++----
 packages/nc-gui/components/cell/TextArea.vue     | 14 +++++++++-----
 .../virtual-cell/components/ListItem.vue         |  7 +++++--
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index 3a4d7051de..f447e9dbb5 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -176,8 +176,16 @@ watch(editorDom, () => {
     }"
     tabindex="0"
   >
-    <div v-if="props.showMenu && !props.readonly" class="absolute top-0 right-0.5 xs:hidden">
-      <CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" embed-mode />
+    <div
+      v-if="props.showMenu && !props.readonly"
+      class="absolute top-0 right-0.5 xs:hidden"
+      :class="{
+        'max-w-[calc(100%_-_198px)] flex justify-end rounded-tr-2xl overflow-hidden': props.fullMode,
+      }"
+    >
+      <div class="nc-scrollbar-x-md">
+        <CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" embed-mode />
+      </div>
     </div>
     <CellRichTextSelectedBubbleMenuPopup v-if="editor" :editor="editor" />
     <CellRichTextLinkOptions v-if="editor" :editor="editor" />
@@ -226,12 +234,12 @@ watch(editorDom, () => {
 .nc-rich-text-full {
   @apply px-1.75;
   .ProseMirror {
-    @apply !p-2 h-[215px];
+    @apply !p-2 h-[min(797px,100vh_-_170px)];
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: thin !important;
-    max-height: min(794px, calc(100vh - 170px));
     min-height: 215px;
+    max-height: min(797px, calc(100vh - 170px));
   }
   &.readonly {
     .ProseMirror {
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 54ccd18b85..894cbe1029 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -123,7 +123,9 @@ const onMouseMove = (e: MouseEvent) => {
   position.value = {
     top: e.clientY - (mousePosition.value?.top || 0) > 0 ? e.clientY - (mousePosition.value?.top || 0) : position.value?.top || 0,
     left:
-      e.clientX - (mousePosition.value?.left || 0) > 0 ? e.clientX - (mousePosition.value?.left || 0) : position.value?.left || 0,
+      e.clientX - (mousePosition.value?.left || 0) > -16
+        ? e.clientX - (mousePosition.value?.left || 0)
+        : position.value?.left || 0,
   }
 }
 
@@ -281,7 +283,7 @@ watch(inputWrapperRef, () => {
       v-model:visible="isVisible"
       :closable="false"
       :footer="null"
-      wrap-class-name="nc-long-text-expanded-modal !z-1151"
+      wrap-class-name="nc-long-text-expanded-modal"
       :mask="true"
       :mask-closable="false"
       :mask-style="{ zIndex: 1051 }"
@@ -298,7 +300,7 @@ watch(inputWrapperRef, () => {
       >
         <div
           v-if="column"
-          class="flex flex-row gap-x-1 items-center font-medium pl-3 pb-2.5 border-b-1 border-gray-100"
+          class="flex flex-row gap-x-1 items-center font-medium pl-3 pb-2.5 border-b-1 border-gray-100 overflow-hidden"
           :class="{
             'select-none': isDragging,
             'cursor-move': !isEditColumn,
@@ -335,7 +337,9 @@ textarea:focus {
   box-shadow: none;
 }
 .nc-text-area-expanded {
-  max-height: min(794px, calc(100vh - 170px));
+  @apply h-[min(795px,100vh_-_170px)];
+
+  max-height: min(795px, 100vh - 170px);
   scrollbar-width: thin !important;
   &::-webkit-scrollbar-thumb {
     @apply rounded-lg;
@@ -351,7 +355,7 @@ textarea:focus {
 
 .nc-long-text-expanded-modal {
   .ant-modal {
-    @apply !w-full h-full !top-0;
+    @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%];
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
index 76edd4a209..7a1caaf075 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
@@ -208,8 +208,11 @@ const displayValue = computed(() => {
       @apply !min-h-6 !max-h-6;
     }
     .nc-rich-text-embed {
-      .ProseMirror {
-        @apply !overflow-hidden line-clamp-1;
+      .nc-textarea-rich-editor {
+        @apply !overflow-hidden;
+        .ProseMirror {
+          @apply !overflow-hidden line-clamp-1;
+        }
       }
     }
   }