add systel

packages/app/src/components/PageEditor/HandsontableModal.jsx

@@ -16,6 +16,8 @@ import ExpandOrContractButton from '../ExpandOrContractButton';
 
 import MarkdownTableDataImportForm from './MarkdownTableDataImportForm';
 
+import styles from './HandsontableModal.module.scss';
+
 const DEFAULT_HOT_HEIGHT = 300;
 const MARKDOWNTABLE_TO_HANDSONTABLE_ALIGNMENT_SYMBOL_MAPPING = {
   r: 'htRight',
@@ -439,7 +441,8 @@ export default class HandsontableModal extends React.PureComponent {
         backdrop="static"
         keyboard={false}
         size="lg"
-        className={`handsontable-modal ${this.state.isWindowExpanded && 'grw-modal-expanded'}`}
+        // eslint-disable-next-line max-len
+        className={`${styles['grw-handsontable']} ${styles['handsontable-modal']} handsontable-modal ${this.state.isWindowExpanded && `grw-modal-expanded ${styles['grw-modal-expanded']}`}`}
       >
         <ModalHeader tag="h4" toggle={this.cancel} close={buttons} className="bg-primary text-light">
           Edit Table

packages/app/src/components/PageEditor/HandsontableModal.module.scss

@@ -0,0 +1,40 @@
+
+.handsontable :global {
+  .handsontableInput {
+    max-width: 290px !important;
+  }
+
+  td {
+    word-break: break-all;
+  }
+}
+
+.grw-modal-expanded :global {
+  // expand .hot-table-container (with flexbox)
+  .hot-table-container {
+    flex: 1;
+  }
+}
+
+// Prevent handsontable/handsontable #2937 (Manual column resize does not work when handsontable is loaded inside Bootstrap 3.0 Modal)
+// see https://github.com/handsontable/handsontable/issues/2937#issuecomment-287390111
+.modal.in .modal-dialog {
+  &.handsontable-modal :global {
+    transform: none;
+
+    .data-import-button {
+      position: relative;
+      padding-right: 35px;
+      padding-left: 10px;
+
+      i:before {
+        position: absolute;
+        top: 6px;
+        right: 8px;
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+

packages/app/src/styles/_handsontable.scss

@@ -1,10 +1,14 @@
-.handsontable {
-  .handsontableInput {
-    max-width: 290px !important;
-  }
+.grw-handsontable :global {
+  .handsontable {
+    position: relative;
 
-  td {
-    word-break: break-all;
+    .handsontableInput{
+      max-width: 290px !important;
+    }
+
+    td {
+      word-break: break-all;
+    }
   }
 }