Fixed textarea / multiline styling

src/components/AddCrudItem/style.scss

@@ -26,6 +26,12 @@
                 margin: 0 1em;
                 flex: 2;
             }
+
+            textarea {
+                flex: 4;
+                height: 144px;
+                resize: none;
+            }
         }
     }
 

src/components/CrudDocument/style.scss

@@ -2,6 +2,8 @@
 
 .crud-document-wrapper {
     display: flex;
+    width: 100%;
+    overflow: hidden;
     margin-top: 0.5em;
     padding-bottom: 0.5em;
     align-items: center;
@@ -15,6 +17,7 @@
     .fields-list {
         display: flex;
         flex: 4;
+        min-width: 0;
         flex-flow: column;
         padding-right: 0.5em;
 
@@ -29,6 +32,18 @@
             outline: none;
         }
 
+        input, .crud-field.single-line {
+            height: 24px;
+        }
+
+        textarea, .crud-field.multi-line {
+            flex: 1;
+            white-space: pre-wrap;
+            overflow-x: auto;
+            height: 144px;
+            resize: none;
+        }
+
         .editing {
             border-color: $color-secondary;
         }

src/components/CrudField/index.js

@@ -76,7 +76,11 @@ export default class CrudField extends Component {
             );
         }
 
-        const className = classNames('crud-field', { pending });
+        const className = classNames('crud-field', {
+            'multi-line': type === 'textarea',
+            'single-line': ['text', 'number'].includes(type),
+            pending
+        });
 
         return (
             <FieldView

src/components/CrudField/style.scss

@@ -1,6 +1,4 @@
 .crud-field {
-    white-space: normal;
-
     &:nth-child(1) {
         font-size: 95%;
     }

src/containers/CrudList/index.js

@@ -94,22 +94,24 @@ class CrudList extends Component {
 
         return (
             <div className={classNames('crud-list-wrapper', { loading })}>
-                <div className="head">
-                    <h3 className="title">{title}</h3>
-                    <div className="meta">
-                        <button className="button-refresh"
-                            onClick={this.onRefresh}>
-                            {'Refresh'}
-                        </button>
-                        <LoadingIndicator loading={loading} />
+                <div className="crud-list-wrapper-inner">
+                    <div className="head">
+                        <h3 className="title">{title}</h3>
+                        <div className="meta">
+                            <button className="button-refresh"
+                                onClick={this.onRefresh}>
+                                {'Refresh'}
+                            </button>
+                            <LoadingIndicator loading={loading} />
+                        </div>
+                    </div>
+                    <div className="body">
+                        {docsList}
+                        <AddCrudItem
+                            docFields={docFields}
+                            onCreate={this.onCreate}
+                        />
                     </div>
-                </div>
-                <div className="body">
-                    {docsList}
-                    <AddCrudItem
-                        docFields={docFields}
-                        onCreate={this.onCreate}
-                    />
                 </div>
             </div>
         );

src/containers/CrudList/style.scss

@@ -2,19 +2,28 @@
 @import '~mixins';
 
 .crud-list-wrapper {
-    display: flex;
-    margin: 0 0.5em;
-    padding: 0.5em;
-    flex-flow: column;
-    border: 1px solid $color-grey-light;
-    background: white;
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
+    flex: 0 0 50%;
+    overflow: hidden;
+
+    &-inner {
+        display: flex;
+        flex-flow: column;
+        background: white;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
+        margin: 0 0.5em;
+        padding: 0.5em;
+        border: 1px solid $color-grey-light;
+    }
 
     &:first-child {
-        margin-left: 0;
+        .crud-list-wrapper-inner {
+            margin-left: 0;
+        }
     }
     &:last-child {
-        margin-right: 0;
+        .crud-list-wrapper-inner {
+            margin-right: 0;
+        }
     }
 
     &.loading {