From ca5f54cbfd0b5f09405c6162647e6a6d892670c2 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 11 May 2020 10:50:32 -0400
Subject: [PATCH] improve mobile styles

---
 ui/component/claimPreview/view.jsx   | 2 +-
 ui/scss/component/_button.scss       | 1 +
 ui/scss/component/_claim-list.scss   | 1 +
 ui/scss/component/_claim-search.scss | 8 ++++++++
 ui/scss/component/_content.scss      | 2 +-
 ui/scss/component/_media.scss        | 2 ++
 6 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx
index 0394d6eff..e11b50eb4 100644
--- a/ui/component/claimPreview/view.jsx
+++ b/ui/component/claimPreview/view.jsx
@@ -248,7 +248,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
           </UriIndicator>
         ) : (
           <>
-            {!pending ? (
+            {showPublishLink ? null : !pending ? (
               <NavLink {...navLinkProps}>
                 <FileThumbnail thumbnail={thumbnailUrl}>
                   {/* @if TARGET='app' */}
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index 0c21d0499..8a90f151d 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -8,6 +8,7 @@
   @media (min-width: $breakpoint-small) {
     &:focus {
       @include focus;
+      z-index: 2;
     }
   }
 }
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 5d549c8a4..484f6be3a 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -251,6 +251,7 @@
 
 .claim-preview__actions--header {
   @extend .claim-preview__actions;
+  flex-wrap: wrap;
 }
 
 .claim-preview__button {
diff --git a/ui/scss/component/_claim-search.scss b/ui/scss/component/_claim-search.scss
index e3b7a8417..03f3520a6 100644
--- a/ui/scss/component/_claim-search.scss
+++ b/ui/scss/component/_claim-search.scss
@@ -29,6 +29,7 @@
 .claim-search__dropdown--selected {
   background-color: var(--color-primary-alt);
 }
+
 .claim-search__input-container {
   &:not(:first-of-type) {
     padding-left: var(--spacing-medium);
@@ -47,6 +48,7 @@
 .claim-search__input-special {
   font-weight: var(--font-weight-bold);
 }
+
 .claim-search__extra {
   display: flex;
   flex-direction: row;
@@ -58,3 +60,9 @@
   flex-direction: row;
   flex-wrap: wrap;
 }
+
+.claim-search__top-row {
+  @media (max-width: $breakpoint-small) {
+    margin-bottom: var(--spacing-small);
+  }
+}
diff --git a/ui/scss/component/_content.scss b/ui/scss/component/_content.scss
index 0d4d45af4..512bf3716 100644
--- a/ui/scss/component/_content.scss
+++ b/ui/scss/component/_content.scss
@@ -8,7 +8,7 @@
   max-height: var(--inline-player-max-height);
 
   @media (max-width: $breakpoint-small) {
-    margin-top: 10px;
+    margin-top: var(--spacing-xsmall);
   }
 }
 
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
index df2ef5b2c..c03b8158c 100644
--- a/ui/scss/component/_media.scss
+++ b/ui/scss/component/_media.scss
@@ -25,6 +25,8 @@
     position: static;
     transform: none;
     margin-bottom: var(--spacing-xsmall);
+    max-width: 100%;
+    white-space: nowrap;
   }
 
   // This is terrible and should not be removed