From 4379bca73e31c0798ee902f89bf3bc4d1653bd0b Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 13 Jun 2018 17:07:19 -0400
Subject: [PATCH] move subscription to it's own row to avoid overlap issues

---
 .../component/splash/internal/load-screen.jsx |  2 +-
 src/renderer/page/file/view.jsx               | 27 ++++++++++---------
 src/renderer/scss/component/_card.scss        |  4 +++
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/renderer/component/splash/internal/load-screen.jsx b/src/renderer/component/splash/internal/load-screen.jsx
index 0ca5a8f80..9aff326e4 100644
--- a/src/renderer/component/splash/internal/load-screen.jsx
+++ b/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">
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index ff251b045..d4f8237f2 100644
--- a/src/renderer/page/file/view.jsx
+++ b/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"
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index 7688c42b2..6b74d12c1 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/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