clean up mobile styling

ui/component/autoplayCountdown/view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import Button from 'component/button';
 import UriIndicator from 'component/uriIndicator';
+import I18nMessage from 'component/i18nMessage';
 import { formatLbryUrlForWeb } from 'util/url';
 import { withRouter } from 'react-router';
 
@@ -53,16 +54,19 @@ function AutoplayCountdown(props: Props) {
 
   return (
     <div className="video-overlay__wrapper">
-      <div className="video-overlay__subtitle">{__('Up Next')}</div>
+      <div className="video-overlay__subtitle">
+        <I18nMessage tokens={{ channel: <UriIndicator link uri={nextRecommendedUri} /> }}>
+          Up Next by %channel%
+        </I18nMessage>
+      </div>
       <div className="video-overlay__title">{nextTitle}</div>
-      <UriIndicator link uri={nextRecommendedUri} />
 
       <div className="video-overlay__actions">
         <div className="video-overlay__subtitle">
           {__('Playing in %seconds_left% seconds', { seconds_left: timer })}
         </div>
         <div className="section__actions--centered">
-          <Button label={__('Cancel')} button="secondary" onClick={() => setTimerCanceled(true)} />
+          <Button label={__('Cancel')} button="link" onClick={() => setTimerCanceled(true)} />
         </div>
       </div>
     </div>

ui/scss/component/_file-render.scss

@@ -167,22 +167,54 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding: var(--spacing-large);
 
   .button--uri-indicator {
     color: var(--color-gray-3);
   }
+
+  @media (max-width: $breakpoint-small) {
+    align-items: flex-start;
+    padding: var(--spacing-small);
+
+    .button,
+    .video-overlay__subtitle,
+    .video-overlay__actions {
+      font-size: var(--font-small);
+    }
+  }
 }
 
 .video-overlay__title {
-  @extend .section__title;
+  font-size: var(--font-title);
+  font-weight: var(--font-weight-light);
   margin-top: var(--spacing-medium);
   margin-bottom: var(--spacing-small);
+
+  @media (max-width: $breakpoint-small) {
+    margin: 0;
+    font-size: var(--font-medium);
+  }
 }
 
 .video-overlay__subtitle {
   color: var(--color-gray-3);
   margin: var(--spacing-medium) 0;
+  line-height: 1;
+
+  @media (max-width: $breakpoint-small) {
+    margin: 0;
+  }
 }
+
 .video-overlay__actions {
   margin-top: var(--spacing-large);
+
+  .button--link {
+    color: var(--color-white);
+  }
+
+  @media (max-width: $breakpoint-small) {
+    margin-top: var(--spacing-small);
+  }
 }

ui/scss/component/section.scss

@@ -95,6 +95,10 @@
 .section__actions--centered {
   @extend .section__actions;
   justify-content: center;
+
+  @media (max-width: $breakpoint-small) {
+    justify-content: flex-start;
+  }
 }
 
 @media (max-width: $breakpoint-small) {