From 77739c971a558121d02b33ead25d30f477b21c20 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 16 Dec 2020 13:38:18 -0500
Subject: [PATCH] slightly improve mobile style on top page

---
 ui/page/top/view.jsx               | 30 ++++++++++++++++--------------
 ui/scss/component/_claim-list.scss |  5 +++++
 ui/scss/component/_search.scss     |  9 +++++++++
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/ui/page/top/view.jsx b/ui/page/top/view.jsx
index e004efa7d..6dee23f6d 100644
--- a/ui/page/top/view.jsx
+++ b/ui/page/top/view.jsx
@@ -28,20 +28,22 @@ function TopPage(props: Props) {
         defaultFreshness={FRESH_ALL}
         defaultOrderBy={ORDER_BY_TOP}
         meta={
-          <I18nMessage
-            tokens={{
-              repost: (
-                <Button
-                  button="secondary"
-                  navigate={`/$/${PAGES.REPOST_NEW}?to=${queryName}`}
-                  label={__('Repost Here')}
-                />
-              ),
-              publish: <Button button="secondary" onClick={() => beginPublish(queryName)} label={'Publish Here'} />,
-            }}
-          >
-            %repost% %publish%
-          </I18nMessage>
+          <div className="search__top-links">
+            <I18nMessage
+              tokens={{
+                repost: (
+                  <Button
+                    button="secondary"
+                    navigate={`/$/${PAGES.REPOST_NEW}?to=${queryName}`}
+                    label={__('Repost Here')}
+                  />
+                ),
+                publish: <Button button="secondary" onClick={() => beginPublish(queryName)} label={'Publish Here'} />,
+              }}
+            >
+              %repost% %publish%
+            </I18nMessage>
+          </div>
         }
         includeSupportAction
         renderProperties={claim => (
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 58b8dae4a..b44f6c47a 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -253,9 +253,14 @@
 .claim-preview__actions {
   align-self: flex-end;
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
   margin-top: auto;
   width: 100%;
+
+  @media (min-width: $breakpoint-small) {
+    flex-direction: row;
+  }
 }
 
 .claim-preview__primary-actions {
diff --git a/ui/scss/component/_search.scss b/ui/scss/component/_search.scss
index 66e018621..c65023dfc 100644
--- a/ui/scss/component/_search.scss
+++ b/ui/scss/component/_search.scss
@@ -35,3 +35,12 @@
   margin-top: var(--spacing-s);
   font-weight: var(--font-weight-body);
 }
+
+.search__top-links {
+  margin-bottom: 0;
+  margin-top: var(--spacing-xs);
+
+  @media (min-width: $breakpoint-small) {
+    margin-top: 0;
+  }
+}