improve styling on comment thumbnails on staked indicator placement

ui/component/channelStakedIndicator/view.jsx

@@ -1,4 +1,5 @@
 // @flow
+import { SIMPLE_SITE } from 'config';
 import * as ICONS from 'constants/icons';
 import React from 'react';
 import classnames from 'classnames';
@@ -58,30 +59,32 @@ function ChannelStakedIndicator(props: Props) {
   const icon = getChannelIcon(level);
 
   return (
-    <Tooltip
-      label={
-        <div className="channel-staked__tooltip">
-          <div className="channel-staked__tooltip-icons">
-            <LevelIcon icon={icon} isControlling={isControlling} size={isControlling ? 14 : 10} />
-          </div>
+    SIMPLE_SITE && (
+      <Tooltip
+        label={
+          <div className="channel-staked__tooltip">
+            <div className="channel-staked__tooltip-icons">
+              <LevelIcon icon={icon} isControlling={isControlling} size={isControlling ? 14 : 10} />
+            </div>
 
-          <div className="channel-staked__tooltip-text">
-            <span>{__('Level %current_level%', { current_level: level })}</span>
-            <div className="channel-staked__amount">
-              <LbcSymbol postfix={<CreditAmount amount={amount} showLBC={false} />} size={14} />
+            <div className="channel-staked__tooltip-text">
+              <span>{__('Level %current_level%', { current_level: level })}</span>
+              <div className="channel-staked__amount">
+                <LbcSymbol postfix={<CreditAmount amount={amount} showLBC={false} />} size={14} />
+              </div>
             </div>
           </div>
-        </div>
-      }
-    >
-      <div
-        className={classnames('channel-staked__wrapper', {
-          'channel-staked__wrapper--large': large,
-        })}
+        }
       >
-        <LevelIcon icon={icon} large={large} isControlling={isControlling} />
-      </div>
-    </Tooltip>
+        <div
+          className={classnames('channel-staked__wrapper', {
+            'channel-staked__wrapper--large': large,
+          })}
+        >
+          <LevelIcon icon={icon} large={large} isControlling={isControlling} />
+        </div>
+      </Tooltip>
+    )
   );
 }
 

ui/component/claimPreviewSubtitle/view.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import UriIndicator from 'component/uriIndicator';
 import DateTime from 'component/dateTime';
 import Button from 'component/button';
-import ChannelThumbnail from 'component/channelThumbnail';
 import { parseURI } from 'lbry-redux';
 
 type Props = {
@@ -17,7 +16,6 @@ type Props = {
 function ClaimPreviewSubtitle(props: Props) {
   const { pending, uri, claim, type, beginPublish } = props;
   const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
-  const channelUri = claim && claim.signing_channel && claim.signing_channel.permanent_url;
 
   let isChannel;
   let name;
@@ -29,7 +27,6 @@ function ClaimPreviewSubtitle(props: Props) {
     <div className="media__subtitle">
       {claim ? (
         <React.Fragment>
-          {!isChannel && channelUri && type !== 'small' && <ChannelThumbnail uri={channelUri} />}
           <UriIndicator uri={uri} link />{' '}
           {!pending &&
             claim &&

ui/scss/component/_channel.scss

@@ -371,9 +371,9 @@ $metadata-z-index: 1;
 .channel-staked__wrapper {
   display: flex;
   position: absolute;
-  bottom: -0.9rem;
-  left: -0.9rem;
   padding: 0.25rem;
+  bottom: -0.75rem;
+  left: -0.75rem;
   background-color: var(--color-card-background);
   border-radius: 50%;
 }

ui/scss/component/_claim-list.scss

@@ -249,8 +249,14 @@
   align-items: flex-start;
 
   .channel-thumbnail {
+    display: none;
     @include handleChannelGif(1.4rem);
     margin-right: 0;
+    margin-left: var(--spacing-s);
+
+    @media (min-width: $breakpoint-small) {
+      display: block;
+    }
   }
 }
 

ui/scss/component/_comments.scss

@@ -1,5 +1,5 @@
 $thumbnailWidth: 1.5rem;
-$thumbnailWidthSmall: 0rem;
+$thumbnailWidthSmall: 1rem;
 
 .comments {
   list-style-type: none;
@@ -50,11 +50,22 @@ $thumbnailWidthSmall: 0rem;
     @media (min-width: $breakpoint-small) {
       @include handleChannelGif($thumbnailWidth);
     }
+
+    .channel-staked__wrapper {
+      @media (max-width: $breakpoint-small) {
+        padding: 0;
+        left: 0;
+        bottom: -1rem;
+        padding: -1rem;
+        margin-left: 0;
+      }
+    }
   }
 }
 
 .comment__thumbnail-wrapper {
   flex: 0;
+  margin-top: var(--spacing-xxs);
 }
 
 .comment__content {