Merge branch 'ravedev'

ui/component/userChannelFollowIntro/view.jsx

@@ -65,6 +65,7 @@ function UserChannelFollowIntro(props: Props) {
 
   return (
     <Card
+      className="channelsToFollow-wrapper"
       title={__('Find channels to follow')}
       subtitle={__(
         '%SITE_NAME% works better if you find and follow a couple creators you like. You can also block channels you never want to see.',

ui/page/show/view.jsx

@@ -208,7 +208,7 @@ function ShowPage(props: Props) {
 
     if (isClaimBlackListed && !claimIsMine) {
       innerContent = (
-        <Page>
+        <Page className="custom-wrapper">
           <Card
             title={uri}
             subtitle={__(

ui/scss/component/_comment-create.scss

@@ -112,6 +112,24 @@ $thumbnailWidthSmall: 1rem;
     }
   }
 
+  @media (max-width: $breakpoint-small) {
+    .MuiTextField-root {
+      .button--primary {
+        .button__content {
+          .icon {
+            stroke: var(--color-primary-contrast);
+            margin-left: 1px;
+            margin-right: -1px;
+          }
+        }
+      }
+      textarea#create__comment,
+      textarea#create__reply {
+        box-shadow: unset;
+      }
+    }
+  }
+
   @media (min-width: $breakpoint-small) {
     fieldset-section + .section {
       margin-top: var(--spacing-m);

ui/scss/component/_main.scss

@@ -199,6 +199,29 @@ body {
     @media (min-width: $breakpoint-small) {
       padding: var(--spacing-m);
     }
+
+    @media (max-width: $breakpoint-small) {
+      margin-top: 0;
+      .card {
+        padding: 0;
+        .card__first-pane {
+          .card__main-actions {
+            .button--alt:last-of-type {
+              top: -1px;
+              float: right;
+              margin-right: 0;
+            }
+            .comment__sort {
+              .button--alt:last-of-type {
+                top: unset;
+                float: unset;
+                margin-right: unset;
+              }
+            }
+          }
+        }
+      }
+    }
   }
 
   .file-page__info {

ui/scss/component/_post.scss

@@ -119,3 +119,10 @@
   overflow: auto;
   margin-bottom: var(--spacing-l);
 }
+
+@media (min-width: 1600px) {
+  .file-page__post-comments .card__first-pane {
+    width: 52rem;
+    margin: 0 auto;
+  }
+}

ui/scss/init/_gui.scss

@@ -1025,6 +1025,43 @@ img {
   }
 }
 
+.custom-wrapper {
+  @media (max-width: $breakpoint-small) {
+    .card {
+      padding: var(--spacing-xxxs);
+      .card__title-section {
+        width: 100%;
+        div:first-of-type {
+          width: 100%;
+          .card__title {
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+    }
+  }
+}
+
+.channelsToFollow-wrapper {
+  margin-top: var(--spacing-l);
+
+  .claim-preview__wrapper--channel {
+    .claim-preview--channel {
+      a {
+        .button__content {
+          align-items: unset;
+        }
+      }
+    }
+    .menu__button {
+      right: var(--spacing-xs);
+    }
+  }
+}
+
 // Temporary master classes
 .date_time {
   font-size: var(--font-xsmall);
@@ -1052,6 +1089,11 @@ img {
   }
 }
 
+// Remove resize icon in textareas
+::-webkit-resizer {
+  display: none;
+}
+
 // Remove tap focus on mobile devices
 input,
 textarea,