From 4a64bae3768eff68f26deb9fe12f1cefe9ef0b8a Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Tue, 7 Apr 2020 19:20:29 -0400
Subject: [PATCH] Fixes #1355 - sketches overflowing on collection page

---
 client/modules/User/components/Collection.jsx | 78 ++++++++++---------
 client/styles/components/_collection.scss     | 23 +++++-
 2 files changed, 59 insertions(+), 42 deletions(-)

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 {
         </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>
     );
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;