mobile cleanup plus some font fixes

ui/component/common/paginate.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { withRouter } from 'react-router';
 import { Form, FormField } from 'component/common/form';
 import ReactPaginate from 'react-paginate';
+import useIsMobile from 'effects/use-is-mobile';
 
 const PAGINATE_PARAM = 'page';
 
@@ -20,6 +21,7 @@ function Paginate(props: Props) {
   const [textValue, setTextValue] = React.useState('');
   const urlParams = new URLSearchParams(search);
   const currentPage = Number(urlParams.get(PAGINATE_PARAM)) || 1;
+  const isMobile = useIsMobile();
 
   function handleChangePage(newPageNumber: number) {
     if (onPageChange) {
@@ -63,14 +65,16 @@ function Paginate(props: Props) {
             containerClassName="pagination"
           />
         </fieldset-section>
-        <FormField
+        {!isMobile && (
-          value={textValue}
+          <FormField
-          onChange={e => setTextValue(e.target.value)}
+            value={textValue}
-          className="paginate-channel"
+            onChange={e => setTextValue(e.target.value)}
-          label={__('Go to page:')}
+            className="paginate-channel"
-          type="text"
+            label={__('Go to page:')}
-          name="paginate-file"
+            type="text"
-        />
+            name="paginate-file"
+          />
+        )}
       </fieldset-group>
     </Form>
   );

ui/scss/component/_claim-list.scss

@@ -81,13 +81,13 @@
     font-size: 14px;
 
     .media__thumb {
-      width: 4rem;
+      width: 5rem;
-      height: 2.25rem;
+      height: 3rem;
     }
 
     .channel-thumbnail {
-      width: 4rem;
+      width: 5rem;
-      height: 4rem;
+      height: 5rem;
     }
   }
 }

ui/scss/component/_comments.scss

@@ -3,11 +3,10 @@
 }
 
 .comment {
-  font-size: var(--font-multiplier-small);
   padding: var(--spacing-small) 0;
   display: flex;
   flex-direction: row;
-  font-size: var(--font-small);
+  font-size: var(--font-body);
   padding: var(--spacing-medium) 0;
   margin: 0;
 

ui/scss/component/_media.scss

@@ -66,6 +66,7 @@
 .media__subtitle {
   align-self: flex-start;
   color: var(--color-text-subtitle);
+  font-size: var(--font-small);
 
   svg {
     stroke: var(--color-text-subtitle);

ui/scss/component/_navigation.scss

@@ -5,6 +5,7 @@
 
   @media (max-width: $breakpoint-small) {
     display: none;
+    margin-left: 0;
   }
 }
 

ui/scss/component/_pagination.scss

@@ -6,6 +6,10 @@
   + .form-field {
     margin-left: var(--spacing-medium);
   }
+
+  @media (max-width: $breakpoint-small) {
+    font-size: var(--font-small);
+  }
 }
 
 .pagination__item {
@@ -41,6 +45,16 @@
     display: block;
     height: 100%;
   }
+
+  @media (max-width: $breakpoint-small) {
+    width: 2rem;
+    height: 2rem;
+
+    &:not(.pagination__item--previous):not(.pagination__item--next) {
+      font-weight: var(--font-weight-bold);
+      line-height: 2rem;
+    }
+  }
 }
 
 .pagination__item--break {

ui/scss/component/section.scss

@@ -46,7 +46,7 @@
 .section__title--small {
   @extend .section__title;
   font-size: var(--font-body);
-  margin-top: var(--spacing-small);
+  margin-top: var(--spacing-medium);
 }
 
 .section__title--large {

ui/scss/init/_gui.scss

@@ -18,7 +18,7 @@ html {
 
   color: var(--color-text);
   background-color: var(--color-background);
-  font-size: 14px;
+  font-size: 16px;
 }
 
 body {