Made word form show in Modal if screen is Mobile size

src/components/structure/LeftColumn.jsx

@@ -1,16 +0,0 @@
-import Inferno from 'inferno';
-import Component from 'inferno-component';
-
-export class LeftColumn extends Component {
-  constructor (props) {
-    super(props);
-  }
-
-  render () {
-    return (
-      <div className='column is-one-third'>
-        { this.props.children }
-      </div>
-    );
-  }
-}

src/components/structure/LeftColumn/index.jsx

@@ -0,0 +1,32 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+
+import { Modal } from '../Modal';
+
+import './styles.scss';
+
+export class LeftColumn extends Component {
+  constructor (props) {
+    super(props);
+
+    this.isMobile = window.innerWidth < 769;
+  }
+
+  render () {
+    return (
+      <div className='left-column'>
+        {this.isMobile
+          ? (
+            <div className='floating-word-button'>
+              <Modal title='New Word'
+                buttonText={<span className='icon'><i className='fa fa-plus' /></span>}
+              >
+                { this.props.children }
+              </Modal>
+            </div>
+          ) : this.props.children
+        }
+      </div>
+    );
+  }
+}

src/components/structure/LeftColumn/styles.scss

@@ -0,0 +1,13 @@
+@import '../../node_modules/bulma/sass/utilities/mixins';
+@import '../../node_modules/bulma/sass/grid/columns';
+
+.left-column {
+  @extend .column;
+  @extend .is-one-third;
+}
+
+.floating-word-button {
+  position: fixed;
+  z-index: 2;
+  left: 0;
+}

src/components/structure/Modal.jsx

@@ -8,7 +8,7 @@ export class Modal extends Component {
 
   PropTypes.checkPropTypes({
     noButton: PropTypes.bool,
-    buttonText: PropTypes.string,
+    buttonText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     title: PropTypes.string,
     children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     footerAlign: PropTypes.string,