fix: Made rich text modal more inline with design

packages/nc-gui/components/cell/RichText.vue

@@ -160,12 +160,19 @@ const focusEditorEnd = () => {
       'flex flex-col flex-grow': props.fullMode,
     }"
   >
-    <div v-if="props.showMenu" class="absolute top-1 right-3">
+    <div v-if="props.showMenu" class="absolute top-0 right-0.5">
       <CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" embed-mode />
     </div>
     <CellRichTextSelectedBubbleMenuPopup v-if="editor" :editor="editor" />
     <CellRichTextLinkOptions v-if="editor" :editor="editor" />
-    <EditorContent ref="editorDom" :editor="editor" class="nc-textarea-rich w-full h-full nc-text-rich-scroll nc-scrollbar-md" />
+    <EditorContent
+      ref="editorDom"
+      :editor="editor"
+      class="nc-textarea-rich w-full h-full nc-text-rich-scroll nc-scrollbar-md"
+      :class="{
+        'ml-1.5 mt-0.5': props.fullMode,
+      }"
+    />
     <div v-if="props.fullMode" class="flex flex-grow" @click="focusEditorEnd"></div>
   </div>
 </template>

packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue

@@ -259,17 +259,6 @@ const onToggleLink = () => {
       </NcButton>
     </NcTooltip>
 
-    <NcTooltip>
-      <template #title> {{ $t('labels.taskList') }}</template>
-      <NcButton
-        size="small"
-        type="text"
-        :class="{ 'is-active': editor.isActive('taskList') }"
-        @click="editor!.chain().focus().toggleTaskList().run()"
-      >
-        <MdiFormatListCheckbox />
-      </NcButton>
-    </NcTooltip>
     <NcTooltip>
       <template #title> {{ $t('labels.bulletList') }}</template>
       <NcButton
@@ -294,6 +283,18 @@ const onToggleLink = () => {
       </NcButton>
     </NcTooltip>
 
+    <NcTooltip>
+      <template #title> {{ $t('labels.taskList') }}</template>
+      <NcButton
+        size="small"
+        type="text"
+        :class="{ 'is-active': editor.isActive('taskList') }"
+        @click="editor!.chain().focus().toggleTaskList().run()"
+      >
+        <MdiFormatListCheckbox />
+      </NcButton>
+    </NcTooltip>
+
     <div class="divider"></div>
 
     <NcTooltip :disabled="editor.isActive('codeBlock')">
@@ -343,13 +344,25 @@ const onToggleLink = () => {
   @apply border-transparent !shadow-none;
 }
 
+.embed-mode.bubble-menu {
+  @apply !py-0 !my-0 !border-0;
+
+  .divider {
+    @apply my-0 !h-11 border-gray-100;
+  }
+
+  .nc-button {
+    @apply !mt-1.65;
+  }
+}
+
 .bubble-menu {
   // shadow
   @apply bg-white;
   border-width: 1px;
 
-  .is-active {
-    @apply !hover:outline-gray-200 bg-gray-100;
+  .nc-button.is-active {
+    @apply !hover:outline-gray-200 bg-gray-100 text-brand-500;
     outline: 1px;
   }
   .divider {

packages/nc-gui/components/cell/TextArea.vue

@@ -249,14 +249,14 @@ watch(editEnabled, () => {
       <div
         v-if="isVisible"
         ref="inputWrapperRef"
-        class="flex flex-col min-w-200 min-h-70 py-3 pl-3 pr-1 expanded-cell-input relative"
+        class="flex flex-col min-w-200 min-h-70 py-3 expanded-cell-input relative"
         :class="{
           'cursor-move': isDragging,
         }"
       >
         <div
           v-if="column"
-          class="flex flex-row gap-x-1 items-center font-medium pb-2.5 mb-1 py-1 mr-3 ml-1 border-b-1 border-gray-100 cursor-move"
+          class="flex flex-row gap-x-1 items-center font-medium pl-3 pb-2.5 mb-1 border-b-1 border-gray-100 cursor-move"
           :class="{
             'select-none': isDragging,
           }"