Fix top page repost ribbon & buttons on mobile

ui/component/claimRepostAuthor/view.jsx

@@ -1,7 +1,6 @@
 // @flow
 import * as ICONS from 'constants/icons';
 import React from 'react';
-import I18nMessage from 'component/i18nMessage';
 import UriIndicator from 'component/uriIndicator';
 import Icon from 'component/common/icon';
 
@@ -31,16 +30,11 @@ function ClaimRepostAuthor(props: Props) {
   if (repostUrl && !repostChannelUrl) {
     return (
       <div className="claim-preview__repost-author">
-        <Icon icon={ICONS.REPOST} size={10} />
+        <div className="claim-preview__repost-ribbon">
-        <span>
+          <Icon icon={ICONS.REPOST} size={10} className="claim-preview__repost-icon" />
-          <I18nMessage
+          <br />
-            tokens={{
+          {__('Anonymous')}
-              anonymous: <strong>{__('Anonymous --[used in <%anonymous% Reposted>]--')}</strong>,
+        </div>
-            }}
-          >
-            %anonymous% Reposted
-          </I18nMessage>
-        </span>
       </div>
     );
   }

ui/scss/component/_claim-list.scss

@@ -335,7 +335,6 @@
   .claim-preview__repost-author {
     left: 0px;
     top: 0px;
-    //left: auto;
     font-size: var(--font-small);
     opacity: 0.8;
     z-index: 5;

ui/scss/init/_gui.scss

@@ -1,4 +1,3 @@
-// Generic html styles used across the App
 // component specific styling should go in the component scss file
 
 *::selection {
@@ -790,6 +789,47 @@ img {
       &:hover {
         background-color: rgba(var(--color-header-background-base), 0.9);
       }
+      .claim-preview__repost-author {
+        left: 0;
+        top: 0;
+        .claim-preview__repost-ribbon {
+          span {
+            display: inline-block;
+            margin-left: 12px;
+            margin-top: -4px;
+            width: 92px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          @media (max-width: $breakpoint-small) {
+            font-size: var(--font-xxxsmall);
+            .icon {
+              margin-top: 3px;
+            }
+            span {
+              width: 78px;
+              margin-top: 1px;
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .search__top-links {
+    @media (max-width: $breakpoint-small) {
+      .button {
+        padding: 0 var(--spacing-m);
+        height: var(--height-button);
+        margin-bottom: var(--spacing-xxxs);
+        .button__content {
+          .button__label {
+            font-size: var(--font-base);
+          }
+        }
+      }
     }
   }
 
@@ -818,6 +858,23 @@ img {
         }
       }
     }
+    .claim-preview__actions {
+      .claim-preview__primary-actions {
+        margin-top: var(--spacing-xxxs);
+      }
+    }
+    .claim-preview__repost-author {
+      top: var(--spacing-m);
+      left: var(--spacing-m);
+      .claim-preview__repost-ribbon {
+        @media (max-width: $breakpoint-small) {
+          .icon {
+            margin-top: 3px;
+          }
+          font-size: var(--font-xxxsmall);
+        }
+      }
+    }
   }
 }