diff --git a/src/components/Feed/Sidebar/Sidebar.module.scss b/src/components/Feed/Sidebar/Sidebar.module.scss index ce8ab12d..c09de070 100644 --- a/src/components/Feed/Sidebar/Sidebar.module.scss +++ b/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; diff --git a/src/components/Feed/Sidebar/Sidebar.tsx b/src/components/Feed/Sidebar/Sidebar.tsx index f4d41287..83f0a6dd 100644 --- a/src/components/Feed/Sidebar/Sidebar.tsx +++ b/src/components/Feed/Sidebar/Sidebar.tsx @@ -173,7 +173,7 @@ export const Sidebar = (props: FeedSidebarProps) => {
diff --git a/src/components/Views/Feed.module.scss b/src/components/Views/Feed.module.scss index 6a920648..8ed68fdf 100644 --- a/src/components/Views/Feed.module.scss +++ b/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 { diff --git a/src/styles/app.scss b/src/styles/app.scss index f1f5d790..d6743a6b 100644 --- a/src/styles/app.scss +++ b/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 {