Playlist style fixes (#6509)

* Fix spacing on List page

* Fix alignment on List sidebar

ui/component/collectionContentSidebar/view.jsx

@@ -34,10 +34,10 @@ export default function CollectionContent(props: Props) {
         </span>
       }
       titleActions={
-        <>
+        <div className="card__title-actions--link">
           {/* TODO: BUTTON TO SAVE COLLECTION - Probably save/copy modal */}
           <Button label={'View List'} button="link" navigate={`/$/${PAGES.LIST}/${id}`} />
-        </>
+        </div>
       }
       body={
         <ClaimList

ui/page/collection/view.jsx

@@ -103,7 +103,7 @@ export default function CollectionPage(props: Props) {
 
   const subTitle = (
     <div>
-      {uri ? <span>{collectionCount} items</span> : <span>{collectionCount} items</span>}
+      <span className="collection__subtitle">{collectionCount} items</span>
       {uri && <ClaimAuthor uri={uri} />}
     </div>
   );

ui/scss/component/_card.scss

@@ -226,6 +226,11 @@
   }
 }
 
+.card__title-actions--link {
+  margin-top: var(--spacing-xs);
+  margin-right: var(--spacing-xs);
+}
+
 .card__title-actions--small {
   padding: 0;
 }

ui/scss/component/_claim-list.scss

@@ -242,6 +242,10 @@
     justify-content: space-between;
     flex-wrap: wrap;
     align-items: center;
+
+    .claim-preview__actions {
+      margin-left: var(--spacing-m);
+    }
   }
 
   @media (max-width: $breakpoint-xsmall) {

ui/scss/component/_collection.scss

@@ -4,6 +4,11 @@
   position: relative;
 }
 
+.collection__subtitle {
+  display: flex;
+  margin-bottom: var(--spacing-s);
+}
+
 .collection-preview__items {
   display: flex;
   align-items: center;