Adjust RTE table styles

client/web/compose/src/themes/corteza-base/custom.scss

@@ -43,70 +43,3 @@
     padding-bottom: 0px !important;
   }
 }
-
-/* Basic editor styles */
-.editor__content :first-child {
-  margin-top: 0;
-}
-
-/* Table-specific styling */
-.editor__content  table {
-  border-collapse: collapse;
-  margin: 0;
-  overflow: hidden;
-  table-layout: fixed;
-  width: 100%;
-}
-
-.editor__content  td,
-.editor__content  th {
-  border: 1px solid var(--gray);
-  box-sizing: border-box;
-  min-width: 1em;
-  padding: 6px 8px;
-  position: relative;
-  vertical-align: top;
-}
-
-.editor__content  td > *,
-.editor__content  th > * {
-  margin-bottom: 0;
-}
-
-.editor__content  th {
-  background-color: var(--gray-dark);
-  font-weight: bold;
-  text-align: left;
-}
-
-.editor__content  .selectedCell::after {
-  background: var(--gray-dark);
-  content: "";
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-  position: absolute;
-  z-index: 2;
-}
-
-.editor__content  .column-resize-handle {
-  background-color: var(--purple);
-  bottom: -2px;
-  pointer-events: none;
-  position: absolute;
-  right: -2px;
-  top: 0;
-  width: 4px;
-}
-
-.editor__content  .tableWrapper {
-  margin: 1.5rem 0;
-  overflow-x: auto;
-}
-
-.editor__content .resize-cursor {
-  cursor: ew-resize;
-  cursor: col-resize;
-}

lib/vue/src/components/input/CRichTextInput/RToolbar/TNodeAttr/Alignment.vue

@@ -2,13 +2,15 @@
   <b-dropdown
     menu-class="text-center"
     variant="link"
+    boundary="window"
   >
     <template slot="button-content">
       <span class="text-dark font-weight-bold">
         <span :class="rootActiveClasses()">
           <font-awesome-icon
             v-if="format.icon"
-            :icon="format.icon" />
+            :icon="format.icon"
+          />
           <span v-else>
             {{ format.label }}
           </span>
@@ -19,12 +21,12 @@
     <b-dropdown-item
       v-for="v of format.variants"
       :key="v.variant"
-      @click="dispatchTransaction(v)">
+      @click="dispatchTransaction(v)"
-
+    >
       <b-button
         variant="link"
-        class="text-dark font-weight-bold">
+        class="text-dark font-weight-bold"
-
+      >
         <span :class="activeClasses(v.attrs)">
           <font-awesome-icon
             v-if="format.icon"
@@ -47,7 +49,7 @@ import { nodeTypes } from '../../lib/formats'
  * Component is used to display node alignment formatting
  */
 export default {
-  name: 't-nattr-alignment',
+  name: 'TNattrAlignment',
   extends: base,
 
   props: {

lib/vue/src/components/input/CRichTextInput/RToolbar/TNodeAttr/Table.vue

@@ -1,13 +1,16 @@
 <template>
   <b-dropdown
     menu-class="text-center"
-    variant="link">
+    variant="link"
+    boundary="window"
+  >
     <template slot="button-content">
       <span class="text-dark font-weight-bold">
         <span :class="rootActiveClasses()">
           <font-awesome-icon
             v-if="format.icon"
-            :icon="format.icon" />
+            :icon="format.icon"
+          />
           <span v-else>
             {{ format.label }}
           </span>
@@ -21,7 +24,6 @@
       @click="emitClick(v)"
     >
       {{ v.label }}
-
     </b-dropdown-item>
   </b-dropdown>
 </template>
@@ -34,7 +36,7 @@ import { nodeTypes } from '../../lib/formats'
  * Component is used to display node alignment formatting
  */
 export default {
-  name: 't-nattr-table',
+  name: 'TNattrTable',
   extends: base,
 
   props: {

lib/vue/src/components/input/CRichTextInput/index.vue

@@ -1,12 +1,14 @@
 <template>
-  <b-card no-body class="editor rt-content">
+  <b-card
+    no-body
+    class="editor rt-content"
+  >
     <template v-if="editor">
       <b-card-header header-class="p-0 border-bottom">
         <editor-menu-bar
-          :editor="editor"
           v-slot="{ commands, isActive, getMarkAttrs, getNodeAttrs }"
+          :editor="editor"
         >
-
           <r-toolbar
             :editor="editor"
             :formats="toolbar"
@@ -25,7 +27,6 @@
           :editor="editor"
           class="editor__content"
         />
-
       </b-card-body>
     </template>
   </b-card>
@@ -54,8 +55,8 @@ export default {
 
     labels: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
-    }
+    },
   },
 
   data () {
@@ -126,3 +127,76 @@ export default {
   },
 }
 </script>
+
+<style>
+/* Basic editor styles */
+.rt-content {
+  min-width: 12rem;
+  position: static;
+}
+
+.rt-content :first-child {
+  margin-top: 0;
+}
+
+/* Table-specific styling */
+.rt-content  table {
+  border-collapse: collapse;
+  margin: 0;
+  overflow: hidden;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.rt-content  td,
+.rt-content  th {
+  border: 1px solid var(--gray);
+  box-sizing: border-box;
+  min-width: 1em;
+  padding: 6px 8px;
+  position: relative;
+  vertical-align: top;
+}
+
+.rt-content  td > *,
+.rt-content  th > * {
+  margin-bottom: 0;
+}
+
+.rt-content  th {
+  background-color: var(--gray-dark);
+  font-weight: bold;
+  text-align: left;
+}
+
+.rt-content  .selectedCell::after {
+  background: var(--gray-dark);
+  content: "";
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.rt-content  .column-resize-handle {
+  background-color: var(--purple);
+  bottom: -2px;
+  pointer-events: none;
+  position: absolute;
+  right: -2px;
+  top: 0;
+  width: 4px;
+}
+
+.rt-content  .tableWrapper {
+  overflow-x: auto;
+}
+
+.rt-content .resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+</style>