From f18b851edbb161fea0879966277f1d341dd5994b Mon Sep 17 00:00:00 2001
From: Raphael Wickihalder <raphael.wickihalder@odysee.com>
Date: Fri, 18 Feb 2022 08:46:41 +0100
Subject: [PATCH 1/5] Optimize comment input section on markdown page on mobile

---
 ui/scss/component/_comment-create.scss | 17 +++++++++++++++++
 ui/scss/component/_main.scss           | 23 +++++++++++++++++++++++
 ui/scss/init/_gui.scss                 |  5 +++++
 3 files changed, 45 insertions(+)

diff --git a/ui/scss/component/_comment-create.scss b/ui/scss/component/_comment-create.scss
index b0957869e..f4d3cd0a7 100644
--- a/ui/scss/component/_comment-create.scss
+++ b/ui/scss/component/_comment-create.scss
@@ -112,6 +112,23 @@ $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 {
+        box-shadow: unset;
+      }
+    }
+  }
+
   @media (min-width: $breakpoint-small) {
     fieldset-section + .section {
       margin-top: var(--spacing-m);
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index 46a8ec42a..48fcb0f51 100644
--- a/ui/scss/component/_main.scss
+++ b/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 {
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index 9c0e0164a..fb056a5df 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -1052,6 +1052,11 @@ img {
   }
 }
 
+// Remove resize icon in textareas
+::-webkit-resizer {
+  display: none;
+}
+
 // Remove tap focus on mobile devices
 input,
 textarea,

From d95593486fb2e116000a509d81fe9df5f1956cf9 Mon Sep 17 00:00:00 2001
From: Raphael Wickihalder <raphael.wickihalder@odysee.com>
Date: Fri, 18 Feb 2022 08:50:49 +0100
Subject: [PATCH 2/5] Adjust input focus in reply

---
 ui/scss/component/_comment-create.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/scss/component/_comment-create.scss b/ui/scss/component/_comment-create.scss
index f4d3cd0a7..d91f15100 100644
--- a/ui/scss/component/_comment-create.scss
+++ b/ui/scss/component/_comment-create.scss
@@ -123,7 +123,8 @@ $thumbnailWidthSmall: 1rem;
           }
         }
       }
-      textarea#create__comment {
+      textarea#create__comment,
+      textarea#create__reply {
         box-shadow: unset;
       }
     }

From e23e0f526db3f4d9aa50728c5a4ce7da183ced2b Mon Sep 17 00:00:00 2001
From: Raphael Wickihalder <raphael.wickihalder@odysee.com>
Date: Fri, 18 Feb 2022 09:03:35 +0100
Subject: [PATCH 3/5] Optimize DMCA page on mobile

---
 ui/page/show/view.jsx  |  2 +-
 ui/scss/init/_gui.scss | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/ui/page/show/view.jsx b/ui/page/show/view.jsx
index 528303688..1319b5e3f 100644
--- a/ui/page/show/view.jsx
+++ b/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={__(
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index fb056a5df..811572ae0 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -1025,6 +1025,26 @@ 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;
+          }
+        }
+      }
+    }
+  }
+}
+
 // Temporary master classes
 .date_time {
   font-size: var(--font-xsmall);

From 745148c2dcc8453fe5dc48e68b565ce9a0bd885d Mon Sep 17 00:00:00 2001
From: Raphael Wickihalder <raphael.wickihalder@odysee.com>
Date: Fri, 18 Feb 2022 09:15:56 +0100
Subject: [PATCH 4/5] Fix 'Find new channels' page on mobile

---
 ui/component/userChannelFollowIntro/view.jsx |  1 +
 ui/scss/init/_gui.scss                       | 17 +++++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/ui/component/userChannelFollowIntro/view.jsx b/ui/component/userChannelFollowIntro/view.jsx
index 8ac68e7df..517f846da 100644
--- a/ui/component/userChannelFollowIntro/view.jsx
+++ b/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.',
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index 811572ae0..31982f31d 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -1045,6 +1045,23 @@ img {
   }
 }
 
+.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);

From d0920317ad55d810f37599dd0e75df42e47c13ac Mon Sep 17 00:00:00 2001
From: Raphael Wickihalder <raphael.wickihalder@odysee.com>
Date: Fri, 18 Feb 2022 09:23:47 +0100
Subject: [PATCH 5/5] Adjust comment section width on markdown page on HiDPI
 screens

---
 ui/scss/component/_post.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/ui/scss/component/_post.scss b/ui/scss/component/_post.scss
index 3455e19c3..5fa45539e 100644
--- a/ui/scss/component/_post.scss
+++ b/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;
+  }
+}