Improve comments on mobile view

ui/component/comment/view.jsx

@@ -29,6 +29,7 @@ import CreditAmount from 'component/common/credit-amount';
 import OptimizedImage from 'component/optimizedImage';
 import { getChannelFromClaim } from 'util/claim';
 import { parseSticker } from 'util/comments';
+import { useIsMobile } from 'effects/use-screensize';
 
 const AUTO_EXPAND_ALL_REPLIES = false;
 
@@ -114,6 +115,8 @@ function Comment(props: Props) {
     quickReply,
   } = props;
 
+  const isMobile = useIsMobile();
+
   const {
     push,
     replace,
@@ -361,6 +364,7 @@ function Comment(props: Props) {
                         className="comment__action"
                         onClick={handleCommentReply}
                         icon={ICONS.REPLY}
+                        iconSize={isMobile && 12}
                       />
                     )}
                     {ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />}

ui/component/commentReactions/view.jsx

@@ -8,6 +8,7 @@ import classnames from 'classnames';
 import Button from 'component/button';
 import ChannelThumbnail from 'component/channelThumbnail';
 import { useHistory } from 'react-router';
+import { useIsMobile } from 'effects/use-screensize';
 
 type Props = {
   myReacts: Array<string>,
@@ -43,6 +44,8 @@ export default function CommentReactions(props: Props) {
     location: { pathname },
   } = useHistory();
 
+  const isMobile = useIsMobile();
+
   React.useEffect(() => {
     if (!claim) {
       resolve(uri);
@@ -110,6 +113,7 @@ export default function CommentReactions(props: Props) {
         requiresAuth={IS_WEB}
         title={__('Upvote')}
         icon={likeIcon}
+        iconSize={isMobile && 12}
         className={classnames('comment__action', {
           'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.LIKE),
         })}
@@ -120,6 +124,7 @@ export default function CommentReactions(props: Props) {
         requiresAuth={IS_WEB}
         title={__('Downvote')}
         icon={dislikeIcon}
+        iconSize={isMobile && 12}
         className={classnames('comment__action', {
           'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.DISLIKE),
         })}

ui/scss/component/_comments.scss

@@ -1,10 +1,26 @@
 $thumbnailWidth: 1.5rem;
-$thumbnailWidthSmall: 1rem;
+$thumbnailWidthSmall: 1.8rem;
 
 .comments {
   list-style-type: none;
   font-size: var(--font-small);
   margin-top: var(--spacing-l);
+
+  @media (max-width: $breakpoint-small) {
+    margin-top: var(--spacing-s);
+
+    div {
+      font-size: var(--font-xsmall) !important;
+    }
+
+    .channel-name {
+      font-size: var(--font-xsmall);
+    }
+
+    span {
+      font-size: var(--font-xxsmall);
+    }
+  }
 }
 
 .comments--contracted {
@@ -42,6 +58,10 @@ $thumbnailWidthSmall: 1rem;
 
   &:not(:first-child) {
     margin-top: var(--spacing-l);
+
+    @media (max-width: $breakpoint-small) {
+      margin-top: var(--spacing-m) !important;
+    }
   }
 
   .comment__author-thumbnail {
@@ -79,16 +99,21 @@ $thumbnailWidthSmall: 1rem;
 
 .comment__replies-container {
   margin: 0;
+  overflow-x: hidden;
 }
 
 .comment__replies {
   display: flex;
   margin-top: var(--spacing-m);
-  margin-left: calc(#{$thumbnailWidthSmall} + var(--spacing-xs));
+  margin-left: #{$thumbnailWidthSmall};
 
   @media (min-width: $breakpoint-small) {
     margin-left: calc(#{$thumbnailWidth} + var(--spacing-m));
   }
+
+  @media (max-width: $breakpoint-small) {
+    margin-top: var(--spacing-s);
+  }
 }
 
 .comment--reply {
@@ -198,6 +223,10 @@ $thumbnailWidthSmall: 1rem;
       margin-top: var(--spacing-xxs);
     }
   }
+
+  @media (max-width: $breakpoint-small) {
+    padding-right: var(--spacing-l);
+  }
 }
 
 .comment__author {
@@ -475,4 +504,9 @@ $thumbnailWidthSmall: 1rem;
 .emote {
   max-width: 1.5rem;
   max-height: 1.5rem;
+
+  @media (max-width: $breakpoint-small) {
+    max-width: 1.25rem;
+    max-height: 1.25rem;
+  }
 }