Full height/width modal for libraries

src/components/library/library.jsx

@@ -33,7 +33,7 @@ class LibraryComponent extends React.Component {
                 visible={this.props.visible}
                 onRequestClose={this.props.onRequestClose}
             >
-                <h1 className={styles.modalHeader}>{this.props.title}</h1>
+                // <h1 className={styles.modalHeader}>{this.props.title}</h1>
                 <div className={styles.libraryScrollGrid}>
                     {this.props.data.map((dataItem, itemId) => {
                         const scratchURL = dataItem.md5 ?

src/components/modal/modal.css

@@ -40,3 +40,22 @@
     right: 1rem;
     z-index: 2;
 }
+
+.full-modal-content {
+    // same as .modal-children
+    position: absolute;
+    outline: none;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: 'touch';
+    border: 1px solid #ccc;
+    padding: 0;
+    user-select: none;
+
+    // different from .modal-children
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: 0;
+
+}

src/components/modal/modal.jsx

@@ -11,7 +11,7 @@ class ModalComponent extends React.Component {
     render () {
         return (
             <ReactModal
-                className={styles.modalContent}
+                className={styles.fullModalContent}
                 contentLabel={this.props.contentLabel}
                 isOpen={this.props.visible}
                 overlayClassName={styles.modalOverlay}