update HandsontableModal.module.scss

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

@@ -14,31 +14,33 @@
       text-align: inherit;
     }
   }
-}
 
-// expand .hot-table-container (with flexbox)
-.grw-modal-expanded :global {
-  .hot-table-container {
-    flex: 1;
+  // expand .hot-table-container (with flexbox)
+  .grw-modal-expanded {
+    .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 {
-//   transform: none;
-
-//   .data-import-button {
-//     position: relative;
-//     padding-right: 35px;
-//     padding-left: 10px;
-
-//     i:before {
-//       position: absolute;
-//       top: 6px;
-//       right: 8px;
-//       font-size: 20px;
-//     }
-//   }
-// }
 
+  // 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
+  // This issue fixing from Handsontable v 7.0.0
+  // see: https://github.com/handsontable/handsontable/issues/2937#issuecomment-480824024
+  .modal.in .modal-dialog.handsontable-modal {
+    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/components/PageEditor/HandsontableModal.tsx

@@ -459,11 +459,11 @@ export const HandsontableModal = (props: HandsontableModalProps): JSX.Element =>
       backdrop="static"
       keyboard={false}
       size="lg"
-      className={`handsontable-modal ${styles['grw-handsontable']}
-        ${isWindowExpanded && `grw-modal-expanded ${styles['grw-modal-expanded']}`}`}
+      wrapClassName={`${styles['grw-handsontable']}`}
+      className={`handsontable-modal ${isWindowExpanded && 'grw-modal-expanded'}`}
     >
       <ModalHeader tag="h4" toggle={cancel} close={buttons} className="bg-primary text-light">
-        Edit Table
+          Edit Table
       </ModalHeader>
       <ModalBody className="p-0 d-flex flex-column">
         <div className="grw-hot-modal-navbar px-4 py-3 border-bottom">