Merge pull request #638 from weseek/imprv/improve-handsontable-display

[WIP] Imprv/improve handsontable display

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

@@ -67,7 +67,7 @@ export default class HandsontableModal extends React.Component {
 
   render() {
     return (
-      <Modal show={this.state.show} onHide={this.cancel} bsSize="large">
+      <Modal show={this.state.show} onHide={this.cancel} bsSize="large" dialogClassName="handsontable-modal">
         <Modal.Header closeButton>
           <Modal.Title>Edit Table</Modal.Title>
         </Modal.Header>
@@ -138,8 +138,15 @@ export default class HandsontableModal extends React.Component {
           }
         }
       },
-      stretchH: 'all',
-      selectionMode: 'multiple'
+      selectionMode: 'multiple',
+      modifyColWidth: function(width) {
+        if (width < 100) {
+          return 100;
+        }
+        if (width > 300) {
+          return 300;
+        }
+      }
     };
   }
 }

src/client/styles/scss/_handsontable.scss

@@ -0,0 +1,13 @@
+.handsontable {
+  .handsontableInput {
+    max-width: 290px !important;
+  }
+
+  td {
+    word-break: break-all;
+  }
+}
+
+.handsontable-modal.modal-lg {
+  width: 90%;
+}

src/client/styles/scss/style.scss

@@ -42,6 +42,7 @@
 @import 'shortcuts';
 @import 'user';
 @import 'user_growi';
+@import 'handsontable';
 @import 'wiki';
 
 /*