Merge pull request #1371 from processing/collection-sketches-alignment

Fixes #1355 - sketches overflowing on collection page

client/modules/User/components/Collection.jsx

@@ -327,6 +327,7 @@ class Collection extends React.Component {
         </Helmet>
         {this._renderLoader()}
         {this.hasCollection() && this._renderCollectionMetadata()}
+        <div className="collection-content">
           <div className="collection-table-wrapper">
             {this._renderEmptyTable()}
             {this.hasCollectionItems() &&
@@ -366,6 +367,7 @@ class Collection extends React.Component {
               )
             }
           </div>
+        </div>
       </section>
     );
   }

client/styles/components/_collection.scss

@@ -1,6 +1,8 @@
 .collection-container {
   padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
+  position: relative;
   flex: 1;
+  overflow: hidden;
   display: flex;
   flex-direction:column;
 }
@@ -114,15 +116,28 @@
   flex-grow: 0;
 }
 
-.collection-table-wrapper {
+.collection-content {
-  width: #{1012 / $base-font-size}rem;
+  display: flex;
-  margin: 0 auto;
+  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;