HMr fixed

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -401,7 +401,7 @@ export default class HandsontableModal extends React.PureComponent {
   renderExpandOrContractButton() {
     const iconClassName = this.state.isWindowExpanded ? 'icon-size-actual' : 'icon-size-fullscreen';
     return (
-      <button type="button" className="close mr-3" onClick={this.state.isWindowExpanded ? this.contractWindow : this.expandWindow}>
+      <button type="button" className="close" onClick={this.state.isWindowExpanded ? this.contractWindow : this.expandWindow}>
         <i className={iconClassName} style={{ fontSize: '0.8em' }} aria-hidden="true"></i>
       </button>
     );
@@ -416,15 +416,15 @@ export default class HandsontableModal extends React.PureComponent {
     const dialogClassName = dialogClassNames.join(' ');
 
     return (
-      <Modal isOpen={this.state.show} toggle={this.cancel} bsSize="large" dialogClassName={dialogClassName}>
-        <ModalHeader toggle={this.cancel}>
-          { this.renderExpandOrContractButton() }
-          Edit Table
+      <Modal isOpen={this.state.show} toggle={this.cancel} bsSize="large" dialogClassName={dialogClassName} className="grw-handsontable-modal">
+        <ModalHeader toggle={this.cancel} className="grw-modal-header">
+          <span>Edit Table</span>
+          <span className="ml-auto">{ this.renderExpandOrContractButton() }</span>
         </ModalHeader>
         <ModalBody className="p-0 d-flex flex-column">
           <div className="px-4 py-3 modal-navbar bg-light">
-            <Button className="m-r-20 data-import-button" onClick={this.toggleDataImportArea}>
-              Data Import<i className={this.state.isDataImportAreaExpanded ? 'fa fa-angle-up' : 'fa fa-angle-down'}></i>
+            <Button className="mr-4 data-import-button" onClick={this.toggleDataImportArea}>
+              <span className="mr-3">Data Import</span><i className={this.state.isDataImportAreaExpanded ? 'fa fa-angle-up' : 'fa fa-angle-down'}></i>
             </Button>
             <ButtonGroup>
               <Button onClick={() => { this.alignButtonHandler('l') }}><i className="ti-align-left"></i></Button>
@@ -452,13 +452,11 @@ export default class HandsontableModal extends React.PureComponent {
             />
           </div>
         </ModalBody>
-        <ModalFooter>
-          <div className="d-flex justify-content-between">
-            <Button color="danger" onClick={this.reset}>Reset</Button>
-            <div className="d-flex">
-              <Button color="secondary" onClick={this.cancel}>Cancel</Button>
-              <Button color="primary" onClick={this.save}>Done</Button>
-            </div>
+        <ModalFooter className="grw-modal-footer">
+          <Button color="danger" onClick={this.reset}>Reset</Button>
+          <div className="ml-auto">
+            <Button className="mr-2" color="secondary" onClick={this.cancel}>Cancel</Button>
+            <Button color="primary" onClick={this.save}>Done</Button>
           </div>
         </ModalFooter>
       </Modal>

src/client/js/components/PageEditor/MarkdownTableDataImportForm.jsx

@@ -71,6 +71,7 @@ export default class MarkdownTableDataImportForm extends React.Component {
           <textarea
             id="data-import-form-type-textarea"
             componentClass="textarea"
+            className="w-100"
             placeholder="Paste table data"
             style={{ height: 200 }}
             onChange={(e) => { return this.setState({ data: e.target.value }) }}
@@ -89,7 +90,7 @@ export default class MarkdownTableDataImportForm extends React.Component {
           </div>
         </Collapse>
         <div className="d-flex justify-content-end">
-          <Button color="secondary" onClick={this.props.onCancel}>Cancel</Button>
+          <Button color="secondary mr-2" onClick={this.props.onCancel}>Cancel</Button>
           <Button color="primary" onClick={this.importButtonHandler}>Import</Button>
         </div>
       </form>

src/client/styles/scss/_modal.scss

@@ -0,0 +1,15 @@
+.grw-handsontable-modal {
+  width: 900px;
+  max-width: initial;
+  overflow-x: hidden;
+  .grw-modal-header {
+    .modal-title {
+      display: flex;
+      width: 100%;
+    }
+  }
+  .grw-modal-footer {
+    display: flex;
+    border-top: 1px solid $border;
+  }
+}

src/client/styles/scss/style-app.scss

@@ -39,6 +39,7 @@
 @import 'layout_kibela';
 @import 'layout_variable';
 @import 'login';
+@import 'modal';
 @import 'navbar';
 @import 'navbar_kibela';
 @import 'notification';