From 4bbd831a169c7d3bcda7ba990a5779feb59e883f Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 15 Jun 2020 10:41:59 -0400
Subject: [PATCH] fix mobile style

---
 ui/component/walletSendTip/view.jsx |  4 ++--
 ui/scss/component/_button.scss      | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/ui/component/walletSendTip/view.jsx b/ui/component/walletSendTip/view.jsx
index 15577c32d..6e397511e 100644
--- a/ui/component/walletSendTip/view.jsx
+++ b/ui/component/walletSendTip/view.jsx
@@ -205,7 +205,7 @@ function WalletSendTip(props: Props) {
                       key={amount}
                       disabled={amount > balance}
                       button="alt"
-                      className={classnames('button-toggle', {
+                      className={classnames('button-toggle button-toggle--expandformobile', {
                         'button-toggle--active': tipAmount === amount,
                         'button-toggle--disabled': amount > balance,
                       })}
@@ -215,7 +215,7 @@ function WalletSendTip(props: Props) {
                   ))}
                   <Button
                     button="alt"
-                    className={classnames('button-toggle', {
+                    className={classnames('button-toggle button-toggle--expandformobile', {
                       'button-toggle--active': !DEFAULT_TIP_AMOUNTS.includes(tipAmount),
                     })}
                     label={__('Custom')}
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index 06f3f493f..ef7162c9b 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -120,6 +120,20 @@ svg + .button__label,
   }
 }
 
+.button-toggle--expandformobile {
+  @media (max-width: $breakpoint-small) {
+    display: block;
+    width: 100%;
+    text-align: center;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--color-border);
+
+    &:not(:first-of-type) {
+      margin-top: var(--spacing-s);
+    }
+  }
+}
+
 .button-toggle--active {
   color: var(--color-primary);
   background-color: var(--color-primary-alt);