improve sizes/spacing on large screens

src/renderer/component/publishForm/view.jsx

@@ -362,7 +362,7 @@ class PublishForm extends React.PureComponent<Props> {
             {__('to learn more.')}
           </div>
           {(filePath || !!editingURI) && (
-            <div className="card-media__internal-links">
+            <div className="card__actions-top-corner">
               <Button
                 button="inverse"
                 icon={icons.CLOSE}

src/renderer/scss/component/_card.scss

@@ -36,24 +36,6 @@
   cursor: pointer;
 }
 
-.card__media {
-  background-color: $lbry-gray-3;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-.card__media--no-img {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  position: relative;
-}
-
-.card__media--nsfw {
-  background-color: $lbry-red-5;
-}
-
 .card--pending {
   opacity: 0.5;
 }
@@ -85,6 +67,24 @@
   }
 }
 
+.card__media {
+  background-color: $lbry-gray-3;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.card__media--no-img {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.card__media--nsfw {
+  background-color: $lbry-red-5;
+}
+
 .card__actions {
   display: flex;
   margin-top: $spacing-vertical * 2/3;
@@ -227,12 +227,12 @@
 
 .card__subtitle {
   color: $lbry-gray-5;
-  font-size: 1em;
-  line-height: 1em;
+  font-size: .9em;
+  line-height: .9em;
   padding-top: $spacing-vertical * 1/3;
 
   @media (min-width: $large-breakpoint) {
-    font-size: 1.2em;
+    font-size: 1em;
   }
 }
 
@@ -277,11 +277,11 @@
 .card__title--file-card {
   // FileCard is slightly different where the title is only slightly bigger than the subtitle
   // Slightly bigger than 2 lines for consistent channel placement
-  font-size: 1.1em;
+  font-size: 1em;
   height: 3.3em;
 
   @media only screen and (min-width: $large-breakpoint) {
-    font-size: 1.3em;
+    font-size: 1.1em;
   }
 }