Feed menu style fixes for mobile

src/components/Feed/Sidebar/Sidebar.module.scss

@@ -1,10 +1,11 @@
 .sidebar {
   max-height: calc(100vh - 120px);
   overflow: auto;
-  position: sticky;
   top: 120px;
 
   @include media-breakpoint-up(md) {
+    position: sticky;
+
     ul > li {
       white-space: nowrap;
       overflow: hidden;
@@ -64,6 +65,22 @@
     display: flex;
     justify-content: space-between;
     margin: 2em 0;
+
+    @include media-breakpoint-down(md) {
+      margin: 0;
+      position: absolute;
+      right: 12px;
+    }
+
+    @include media-breakpoint-down(sm) {
+      right: 2px;
+    }
+  }
+
+  .settingsLabel {
+    @include media-breakpoint-down(sm) {
+      display: none;
+    }
   }
 
   a {
@@ -132,7 +149,8 @@
   }
 }
 
-.feedFilters {
+.feedFilters,
+.subscriptions {
   @include media-breakpoint-down(md) {
     display: flex;
     overflow: auto;
@@ -144,6 +162,21 @@
         margin-right: 0 !important;
       }
     }
+
+    &::-webkit-scrollbar {
+      height: 0;
+      width: 0;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: none;
+    }
+  }
+}
+
+.feedFilters {
+  @include media-breakpoint-down(md) {
+    margin-bottom: 0 !important;
   }
 
   .sidebarItemName {
@@ -152,15 +185,6 @@
 }
 
 .subscriptions {
-  @include media-breakpoint-down(md) {
-    display: flex;
-    overflow: auto;
-
-    li {
-      margin-right: 3rem !important;
-    }
-  }
-
   .icon {
     text-align: center;
 

src/components/Feed/Sidebar/Sidebar.tsx

@@ -173,7 +173,7 @@ export const Sidebar = (props: FeedSidebarProps) => {
       <div class={styles.settings}>
         <a href="/feed/settings">
           <Icon name="settings" class={styles.icon} />
-          {t('Feed settings')}
+          <span class={styles.settingsLabel}>{t('Feed settings')}</span>
         </a>
       </div>
     </div>

src/components/Views/Feed.module.scss

@@ -1,5 +1,9 @@
 .feedFilter {
   margin: 0.2em 0 4.8rem;
+
+  @include media-breakpoint-down(md) {
+    margin-right: 4rem !important;
+  }
 }
 
 .feedNavigation {

src/styles/app.scss

@@ -777,8 +777,12 @@ figure {
 .main-content {
   flex: 1 100%;
   min-height: 90vh;
-  padding-top: 130px;
+  padding-top: 80px;
   position: relative;
+
+  @include media-breakpoint-up(lg) {
+    padding-top: 130px;
+  }
 }
 
 .main-content--no-padding {