From 7f78fda07373339252d67f93a379efad1e64e69c Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Mon, 16 Sep 2019 23:13:20 +0200
Subject: [PATCH] Fix sketch list padding in collection view

---
 client/modules/User/components/Collection.jsx | 43 ++++++++++---------
 client/styles/components/_collection.scss     |  4 ++
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
index c910d39d..480001e8 100644
--- a/client/modules/User/components/Collection.jsx
+++ b/client/modules/User/components/Collection.jsx
@@ -301,7 +301,7 @@ class Collection extends React.Component {
           }
         </h2>
 
-        <p className="collection-metadata__user">{items.length} sketches collected by {owner.username}</p>
+        <p className="collection-metadata__user">{items.length} sketch{items.length === 1 ? '' : 'es'} collected by {owner.username}</p>
 
         <p className="collection-metadata__description">
           {
@@ -359,25 +359,28 @@ class Collection extends React.Component {
           {this.hasCollection() && this._renderCollectionMetadata()}
           {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()}
-                  />))}
-              </tbody>
-            </table>}
+            <div className="collection-table-wrapper">
+              <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()}
+                    />))}
+                </tbody>
+              </table>
+            </div>
+          }
         </div>
       </section>
     );
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
index dbec678c..92768d38 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -39,3 +39,7 @@
 .collection-metadata__description .editable-input__input {
   width: 100%;
 }
+
+.collection-table-wrapper {
+  margin: #{28 / $base-font-size}rem #{56 / $base-font-size}rem;
+}