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

Fixes #1355 - sketches overflowing on collection page

Author: catarak

client/modules/User/components/Collection.jsx

@@ -327,44 +327,46 @@ class Collection extends React.Component {
         </Helmet>
         {this._renderLoader()}
         {this.hasCollection() && this._renderCollectionMetadata()}
-        <div className="collection-table-wrapper">
-          {this._renderEmptyTable()}
-          {this.hasCollectionItems() &&
-            <table className="sketches-table" summary="table containing all collections">
-              <thead>
-                <tr>
-                  {this._renderFieldHeader('name', 'Name')}
-                  {this._renderFieldHeader('createdAt', 'Date Added')}
-                  {this._renderFieldHeader('user', 'Owner')}
-                  <th scope="col"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {this.props.collection.items.map(item =>
-                  (<CollectionItemRow
-                    key={item.id}
-                    item={item}
-                    user={this.props.user}
-                    username={this.getUsername()}
-                    collection={this.props.collection}
-                  />))}
-              </tbody>
-            </table>
-          }
-          {
-            this.state.isAddingSketches && (
-              <Overlay
-                title="Add sketch"
-                actions={<SketchSearchbar />}
-                closeOverlay={this.hideAddSketches}
-                isFixedHeight
-              >
-                <div className="collection-add-sketch">
-                  <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
-                </div>
-              </Overlay>
-            )
-          }
+        <div className="collection-content">
+          <div className="collection-table-wrapper">
+            {this._renderEmptyTable()}
+            {this.hasCollectionItems() &&
+              <table className="sketches-table" summary="table containing all collections">
+                <thead>
+                  <tr>
+                    {this._renderFieldHeader('name', 'Name')}
+                    {this._renderFieldHeader('createdAt', 'Date Added')}
+                    {this._renderFieldHeader('user', 'Owner')}
+                    <th scope="col"></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {this.props.collection.items.map(item =>
+                    (<CollectionItemRow
+                      key={item.id}
+                      item={item}
+                      user={this.props.user}
+                      username={this.getUsername()}
+                      collection={this.props.collection}
+                    />))}
+                </tbody>
+              </table>
+            }
+            {
+              this.state.isAddingSketches && (
+                <Overlay
+                  title="Add sketch"
+                  actions={<SketchSearchbar />}
+                  closeOverlay={this.hideAddSketches}
+                  isFixedHeight
+                >
+                  <div className="collection-add-sketch">
+                    <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
+                  </div>
+                </Overlay>
+              )
+            }
+          </div>
         </div>
       </section>
     );

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;