diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css index f66b228c..a9f4e5ce 100644 --- a/src/components/header/header.module.css +++ b/src/components/header/header.module.css @@ -48,8 +48,8 @@ @media (max-width: 768px) { .container { - padding-bottom: 20px; - height: 45.5px; + padding-bottom: 2px; + height: 45px; } .reducedHeight { @@ -67,7 +67,7 @@ @media (min-width: 768px) { .container { - height: 45.5px; + height: 45px; } .temporary { @@ -78,7 +78,7 @@ .tabs { display: flex; - align-items: baseline !important; + margin-bottom: -1px; } .pageName { @@ -134,7 +134,7 @@ color: var(--green); background-color: var(--background); border: 1px solid var(--border-primary); - border-bottom: 2px solid var(--background); + border-bottom: 1px solid var(--background); } .tabMenu li .choice { @@ -143,6 +143,20 @@ border-bottom: 0px solid var(--border-primary); } +.tabs { + overflow-x: auto; /* Enables horizontal scrolling */ + scrollbar-width: none; /* Hides the scrollbar in Firefox */ + -ms-overflow-style: none; /* Hides the scrollbar in IE and Edge */ +} + +.tabs::-webkit-scrollbar { + display: none; /* Hides the scrollbar in WebKit-based browsers */ +} + +.tabMenu li { + display: inline-flex; +} + @media (min-width: 768px) { .about { @@ -155,11 +169,6 @@ } @media (max-width: 768px) { - .tabs { - position: absolute; - margin-bottom: -20px; - } - .fewTabs { position: relative; margin-bottom: 0; diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index 6d7c83bf..6f4b24e9 100644 --- a/src/components/header/header.tsx +++ b/src/components/header/header.tsx @@ -124,6 +124,30 @@ const AuthorHeaderTabs = () => { submitted + {isProfile && ( + <> +
  • + + upvoted + +
  • +
  • + + downvoted + +
  • +
  • + + hidden + +
  • +
  • + + saved + +
  • + + )} ); }; @@ -196,6 +220,7 @@ const Header = () => { const subplebbit = useSubplebbit({ subplebbitAddress: params.subplebbitAddress }); const { suggested, title, shortAddress } = subplebbit || {}; + const isMobile = window.innerWidth < 768; const isAbout = isAboutView(location.pathname); const isAll = isAllView(location.pathname); const isAuthor = isAuthorView(location.pathname); @@ -233,13 +258,23 @@ const Header = () => { )} + {!isMobile && (
    + )} + {isMobile && ( +
    + +
    + )} ); };