align category-list with buttons

src/renderer/page/discover/view.jsx

@@ -18,7 +18,7 @@ class DiscoverPage extends React.PureComponent<Props> {
     const { featuredUris, fetchingFeaturedUris } = this.props;
     const hasContent = typeof featuredUris === 'object' && Object.keys(featuredUris).length;
     const failedToLoad = !fetchingFeaturedUris && !hasContent;
-    // lbry://fortnite-top-stream-moments-nickatnydte#27395875d68e9d3e53be46edf36d622aa8284441
+
     return (
       <Page noPadding isLoading={!hasContent && fetchingFeaturedUris}>
         {hasContent &&

src/renderer/scss/component/_button.scss

@@ -114,7 +114,7 @@ button:disabled {
   text-transform: uppercase;
 }
 
-.btn:not(.btn--no-padding):not(.btn--link) {
+.btn:not(.btn--no-padding):not(.btn--link):not(.btn--no-style) {
   .btn__content {
     padding: 0 8px;
     display: flex;

src/renderer/scss/component/_card.scss

@@ -282,7 +282,7 @@
   }
 
   .card:last-of-type {
-    margin-right: $spacing-vertical * 2/3;
+    margin-right: $spacing-width;
   }
 }
 
@@ -336,12 +336,8 @@
     display: inline-block;
     vertical-align: top;
     overflow: visible;
-    // -- three cards on a screen
-    // -- minus 12px for 1/3 of the page padding (36px)
-    // -- minus 20px for the card's margin
-    // Ideally we should be able to use $spacing-width / 3, but I'm not sure
-    // how inside the calc function
-    width: calc((100% / 3) - 12px - 20px);
+    // we should use $spacing-width - 1px here, not sure why it isn't working
+    width: calc((100% / 3) - 35px);
   }
 
   .card:not(:first-of-type) {
@@ -354,7 +350,7 @@
 
   @media only screen and (min-width: $medium-breakpoint) {
     .card {
-      width: calc((100% / 4) - 12px - 20px);
+      width: calc((100% / 4) - 31px);
     }
   }
 }