fix scrollbar mobile with fix-top navbar

Author: R-Sandor

frontend/app/page.tsx

@@ -20,14 +20,14 @@ export default function App() {
     <div className={`container-fluid`}>
       <div className={`row ${navStyles.fullHeightRow}`}>
         <ScreenSizeProvider>
-          <div className={`col-md-4 col-lg-2 col-xl-2  ${tagStyles.sideMenu}`}>
+          <div
+            className={`col-md-4 col-lg-2 col-xl-1 fixed-top ${tagStyles.sideMenu}`}
+          >
             <NewBookmarkCard />
             <TagList />
           </div>
         </ScreenSizeProvider>
-        <div
-          className={`col-md-8 col-lg-10 col-xl-10 ${navStyles.scrollableColumn}`}
-        >
+        <div className={` col-md-8 col-lg-10  ${navStyles.scrollableColumn}`}>
           <BookmarkCardsView />
         </div>
       </div>

frontend/components/CardView/BookmarkCardsView.tsx

@@ -50,7 +50,10 @@ export default function BookmarkCardsView() {
   return (
     <div>
       {!bookmarks.loading ? (
-        <div className={`${cardView.content} row`}>
+        <div
+          className={`${cardView.content} row`}
+          style={{ marginTop: "60px" }}
+        >
           {filterBookmarks(bookmarks.fetchedBookmarks).map((b) => {
             return (
               <div

frontend/components/Navbar/Navbar.tsx

@@ -53,7 +53,12 @@ const GlobalNavbar: React.FC = () => {
   return (
     <Navbar
       expand="md"
-      style={{ borderBottom: "1px solid", height: "auto", minHeight: "60px" }}
+      fixed="top"
+      style={{
+        borderBottom: "1px solid",
+        height: "auto",
+        minHeight: "60px",
+      }}
       className="bg-body-tertiary"
     >
       <Container className={navbarView.navContainer}>

frontend/styles/cardView.module.scss

@@ -1,7 +1,9 @@
 .content {
   padding-top: 3px;
 
-  @media (max-width: 768px) {
-    padding-bottom: 100px;
+  margin-left: 250px;
+
+  @media (max-width: 760px) {
+    margin-left: 0px;
   }
 }

frontend/styles/navbar.module.scss

@@ -122,7 +122,6 @@
 
 /* navStyles or a shared CSS file */
 .fullHeightRow {
-  height: calc(100vh - 60px);
   flex-wrap: nowrap;
 }
 

frontend/styles/tag.module.scss

@@ -1,8 +1,8 @@
 .sideMenu {
+  margin-top: 60px;
   padding-bottom: 5px;
   padding-top: 10px;
-  max-width: 300px;
-  min-width: 250px;
+  width: 250px;
   background-color: var(--tag-list-bg);
   height: 100%;
   display: flex;