improve mobile styles

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' */}

ui/scss/component/_button.scss

@@ -8,6 +8,7 @@
   @media (min-width: $breakpoint-small) {
     &:focus {
       @include focus;
+      z-index: 2;
     }
   }
 }

ui/scss/component/_claim-list.scss

@@ -251,6 +251,7 @@
 
 .claim-preview__actions--header {
   @extend .claim-preview__actions;
+  flex-wrap: wrap;
 }
 
 .claim-preview__button {

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);
+  }
+}

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);
   }
 }
 

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