File Page style improvements on mobile view

Improve channel preview info display on mobile view

- Slightly smaller profile pic
- smaller font size
- smaller follow button

ui/component/button/view.jsx

@@ -139,7 +139,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
       )}
 
       {children && children}
-      {iconRight && <Icon icon={iconRight} iconColor={iconColor} size={size} />}
+      {iconRight && <Icon icon={iconRight} iconColor={iconColor} size={iconSize || size} />}
     </span>
   );
 

ui/component/fileDescription/view.jsx

@@ -10,6 +10,7 @@ import Button from 'component/button';
 import LbcSymbol from 'component/common/lbc-symbol';
 import FileDetails from 'component/fileDetails';
 import FileValues from 'component/fileValues';
+import { useIsMobile } from 'effects/use-screensize';
 
 type Props = {
   uri: string,
@@ -27,6 +28,8 @@ type Props = {
 export default function FileDescription(props: Props) {
   const { uri, description, amount, hasSupport, isEmpty, doOpenModal, claimIsMine, expandOverride } = props;
 
+  const isMobile = useIsMobile();
+
   const [expanded, setExpanded] = React.useState(false);
   const [showCreditDetails, setShowCreditDetails] = React.useState(false);
 
@@ -44,9 +47,15 @@ export default function FileDescription(props: Props) {
           'media__info-text--expanded': expanded,
         })}
       >
-        {description && <MarkdownPreview className="markdown-preview--description" content={description} simpleLinks />}
+        {isMobile && <ClaimTags uri={uri} type="large" />}
-        <ClaimTags uri={uri} type="large" />
+
-        <FileDetails uri={uri} />
+        <div className="mediaInfo__description">
+          {description && (
+            <MarkdownPreview className="markdown-preview--description" content={description} simpleLinks />
+          )}
+          {!isMobile && <ClaimTags uri={uri} type="large" />}
+          <FileDetails uri={uri} />
+        </div>
       </div>
 
       <div className="card__bottom-actions">

ui/component/markdownLink/view.jsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { isURIValid } from 'util/lbryURI';
 import Button from 'component/button';
 import ClaimLink from 'component/claimLink';
+import { useIsMobile } from 'effects/use-screensize';
 
 type Props = {
   href: string,
@@ -33,6 +34,8 @@ function MarkdownLink(props: Props) {
     setUserMention,
   } = props;
 
+  const isMobile = useIsMobile();
+
   let decodedUri;
   try {
     decodedUri = decodeURI(href);
@@ -127,6 +130,7 @@ function MarkdownLink(props: Props) {
       <Button
         button="link"
         iconRight={isLbryLink ? undefined : ICONS.EXTERNAL}
+        iconSize={isMobile && 12}
         title={title || decodedUri}
         label={children}
         className="button--external-link"

ui/scss/component/_card.scss

@@ -280,10 +280,15 @@
   flex-wrap: wrap;
 
   @media (max-width: $breakpoint-small) {
-    padding: var(--spacing-s);
+    padding: var(--spacing-xxs);
     padding-bottom: 0;
     margin: 0;
-    margin-bottom: var(--spacing-s);
+
+    h1 {
+      font-size: 1.2rem;
+      font-weight: var(--font-weight-bold);
+      line-height: 1.25;
+    }
   }
 }
 
@@ -312,7 +317,22 @@
   }
 
   @media (max-width: $breakpoint-small) {
+    margin-bottom: var(--spacing-s) !important;
     padding: 0 !important;
+
+    .file__viewdate {
+      padding-left: var(--spacing-xxs);
+
+      span {
+        font-size: var(--font-xxsmall);
+        margin: 0;
+      }
+
+      .media__subtitle--centered::before {
+        content: '•';
+        margin: 0 5px;
+      }
+    }
   }
 }
 
@@ -367,6 +387,17 @@
   padding-bottom: 0;
   margin: 0;
   margin-bottom: var(--spacing-m);
+
+  @media (max-width: $breakpoint-small) {
+    margin-bottom: 0px;
+    padding-bottom: var(--spacing-xxs);
+  }
+}
+
+@media (max-width: $breakpoint-small) {
+  .card__main-actions:nth-child(1) {
+    margin-top: var(--spacing-l);
+  }
 }
 
 .card__bottom-gutter {
@@ -389,6 +420,15 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  @media (max-width: $breakpoint-small) {
+    font-size: var(--font-small);
+
+    .button--link {
+      font-size: var(--font-xsmall);
+      margin: 0px;
+    }
+  }
 }
 
 .card__bottom-actions--comments {

ui/scss/component/_claim-list.scss

@@ -867,10 +867,18 @@
   position: relative;
 
   .tag {
-    @media (max-width: $breakpoint-xsmall) {
-      display: none;
-    }
     font-size: var(--font-xsmall);
+
+    @media (max-width: $breakpoint-small) {
+      font-size: var(--font-xxsmall);
+      margin-top: var(--spacing-xxs);
+      padding: 2px var(--spacing-xxs);
+      height: unset;
+
+      .button__content {
+        height: unset;
+      }
+    }
   }
 
   & > *:not(:last-child) {

ui/scss/component/_file-render.scss

@@ -57,6 +57,85 @@
   @media (max-width: $breakpoint-medium) {
     flex-direction: column;
   }
+
+  @media (max-width: $breakpoint-small) {
+    .card__main-actions {
+      padding: var(--spacing-s) var(--spacing-xxs) !important;
+    }
+
+    .claim-preview--inline {
+      align-items: flex-start;
+      line-height: 1.3;
+
+      .button--no-style {
+        align-self: center;
+
+        .channel-thumbnail {
+          margin: var(--spacing-xxs);
+          margin-top: 0px;
+          width: 2.5rem;
+          height: 2.5rem;
+
+          .ff-container {
+            width: 2.5rem;
+            height: 2.5rem;
+            overflow: hidden;
+            border-radius: var(--border-radius);
+          }
+        }
+      }
+
+      .claim-preview-info {
+        justify-content: flex-start;
+
+        .claim-preview__title {
+          margin: unset;
+        }
+      }
+
+      .media__subtitle {
+        height: unset;
+        display: flex;
+        max-width: 100%;
+      }
+
+      .claim-preview__channel-sub-count {
+        font-size: var(--font-xxsmall);
+      }
+
+      .claim-preview-metadata {
+        flex: 1;
+        overflow: hidden;
+
+        span {
+          font-size: var(--font-xxsmall);
+        }
+      }
+
+      .claim-preview__actions {
+        margin: 0;
+        align-self: center;
+
+        .button-group {
+          margin: 0;
+        }
+
+        .button--alt {
+          padding: var(--spacing-xs);
+          height: unset;
+
+          .button__content {
+            height: unset;
+          }
+        }
+
+        span {
+          font-size: var(--font-xsmall);
+          font-weight: var(--font-weight-bold);
+        }
+      }
+    }
+  }
 }
 
 .file-render {

ui/scss/component/_markdown-preview.scss

@@ -65,6 +65,26 @@
     h6 {
       font-size: 0.7em;
     }
+
+    @media (max-width: $breakpoint-small) {
+      font-size: var(--font-xsmall);
+
+      a {
+        .button__content {
+          display: block;
+        }
+
+        span {
+          font-size: var(--font-xsmall);
+          font-weight: var(--font-weight-bold);
+        }
+
+        svg {
+          margin-left: var(--spacing-xxs);
+          bottom: 2;
+        }
+      }
+    }
   }
 
   dl,

ui/scss/component/_media.scss

@@ -73,20 +73,29 @@
   }
 }
 
-.media__info-text--contracted {
-  margin-top: var(--spacing-m);
-  max-height: 5rem;
-  overflow: hidden;
-}
-
 .media__info-text--expanded {
   margin-top: var(--spacing-m);
-  max-height: auto;
-}
-
-.media__info-text--contracted,
-.media__info-text--expanded {
   max-width: 50rem;
+  max-height: auto;
+
+  @media (max-width: $breakpoint-small) {
+    margin-top: 0px;
+  }
+}
+
+.media__info-text--contracted {
+  @extend .media__info-text--expanded;
+  overflow: hidden;
+
+  .mediaInfo__description {
+    max-height: 5rem;
+  }
+}
+
+@media (max-width: $breakpoint-small) {
+  .mediaInfo__description {
+    margin-top: var(--spacing-s);
+  }
 }
 
 .media__info-text--fade {

ui/scss/component/_table.scss

@@ -218,6 +218,12 @@ td {
   td:nth-of-type(2) {
     text-align: right;
   }
+
+  @media (max-width: $breakpoint-small) {
+    td {
+      font-size: var(--font-xxsmall);
+    }
+  }
 }
 
 .table__item--actionable {