diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx index 6dec5e8c..477f1319 100644 --- a/client/modules/User/components/Collection.jsx +++ b/client/modules/User/components/Collection.jsx @@ -327,44 +327,46 @@ class Collection extends React.Component { {this._renderLoader()} {this.hasCollection() && this._renderCollectionMetadata()} -
- {this._renderEmptyTable()} - {this.hasCollectionItems() && - - - - {this._renderFieldHeader('name', 'Name')} - {this._renderFieldHeader('createdAt', 'Date Added')} - {this._renderFieldHeader('user', 'Owner')} - - - - - {this.props.collection.items.map(item => - ())} - -
- } - { - this.state.isAddingSketches && ( - } - closeOverlay={this.hideAddSketches} - isFixedHeight - > -
- -
-
- ) - } +
+
+ {this._renderEmptyTable()} + {this.hasCollectionItems() && + + + + {this._renderFieldHeader('name', 'Name')} + {this._renderFieldHeader('createdAt', 'Date Added')} + {this._renderFieldHeader('user', 'Owner')} + + + + + {this.props.collection.items.map(item => + ())} + +
+ } + { + this.state.isAddingSketches && ( + } + closeOverlay={this.hideAddSketches} + isFixedHeight + > +
+ +
+
+ ) + } +
); diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss index 3a98f78d..973397ef 100644 --- a/client/styles/components/_collection.scss +++ b/client/styles/components/_collection.scss @@ -1,8 +1,10 @@ .collection-container { padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem; + position: relative; flex: 1; + overflow: hidden; display: flex; - flex-direction: column; + flex-direction:column; } .collection-metadata { @@ -114,15 +116,28 @@ flex-grow: 0; } -.collection-table-wrapper { - width: #{1012 / $base-font-size}rem; - margin: 0 auto; +.collection-content { + display: flex; + flex-direction: column; flex: 1; + overflow: hidden; + max-width: #{1012 / $base-font-size}rem; + margin: 0 auto; + width: 100%; + @include themify() { border: 1px solid getThemifyVariable('modal-border-color'); } } +.collection-table-wrapper { + overflow-y: auto; + max-width: 100%; + min-height: 100%; +} + + +// maybe don't need this? [data-has-items=false] .collection-table-wrapper { display: flex; justify-content: center;