move subscription to it's own row to avoid overlap issues

src/renderer/component/splash/internal/load-screen.jsx

@@ -21,7 +21,7 @@ class LoadScreen extends React.PureComponent<Props> {
       <div className="load-screen">
         <div className="load-screen__header">
           <h1 className="load-screen__title">{__('LBRY')}</h1>
-          <sup className="load-scree__beta">beta</sup>
+          <sup className="load-screen__beta">beta</sup>
         </div>
         {isWarning ? (
           <span className="load-screen__message">

src/renderer/page/file/view.jsx

@@ -180,7 +180,6 @@ class FilePage extends React.Component<Props> {
               {metadata.nsfw && <div>NSFW</div>}
               <div className="card__channel-info">
                 <UriIndicator uri={uri} link />
-
                 <div className="card__actions card__actions--no-margin">
                   {claimIsMine ? (
                     <Button
@@ -193,21 +192,23 @@ class FilePage extends React.Component<Props> {
                       }}
                     />
                   ) : (
-                    <React.Fragment>
-                      <Button
-                        button="alt"
-                        icon="Send"
-                        label={__('Enjoy this? Send a tip')}
-                        onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
-                      />
-                      <SubscribeButton uri={subscriptionUri} channelName={channelName} />
-                    </React.Fragment>
-                  )}
-                  {speechSharable && (
-                    <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
+                    <SubscribeButton uri={subscriptionUri} channelName={channelName} />
                   )}
                 </div>
               </div>
+              <div className="card__actions card__actions--end">
+                {!claimIsMine && (
+                  <Button
+                    button="alt"
+                    icon="Send"
+                    label={__('Enjoy this? Send a tip')}
+                    onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
+                  />
+                )}
+                {speechSharable && (
+                  <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
+                )}
+              </div>
               <FormRow alignRight>
                 <FormField
                   type="checkbox"

src/renderer/scss/component/_card.scss

@@ -240,6 +240,10 @@
   right: $spacing-vertical;
 }
 
+.card__actions--end {
+  justify-content: flex-end;
+}
+
 /*
  .card-row is used on the discover page
  It is a list of cards that extend past the right edge of the screen