fix: sidenav items overlapping in small screens (#4789)

frontend/src/container/SideNav/SideNav.styles.scss

@@ -78,8 +78,22 @@
 			box-shadow: none !important;
 		}
 	}
+	.nav-wrapper {
+		height: calc(100% - 52px);
 
+		.primary-nav-items {
+			max-height: 65%;
+			overflow-y: auto;
+			overflow-x: hidden;
+
+			&::-webkit-scrollbar {
+				width: 0.1rem;
+			}
+		}
 		.secondary-nav-items {
+			max-height: 35%;
+			overflow-y: auto;
+			overflow-x: hidden;
 			border-top: 1px solid var(--bg-slate-400);
 			padding: 8px 0;
 			max-width: 100%;
@@ -90,7 +104,9 @@
 
 			transition: all 0.3s, background 0s, border 0s;
 
-		// position: relative;
+			&::-webkit-scrollbar {
+				width: 0.1rem;
+			}
 
 			.collapse-expand-handlers {
 				position: absolute;
@@ -109,6 +125,19 @@
 				}
 			}
 		}
+	}
+
+	.nav-wrapper-cloud {
+		height: calc(100% - 88px);
+
+		.secondary-nav-items {
+			max-height: 30%;
+		}
+
+		.primary-nav-items {
+			max-height: 70%;
+		}
+	}
 
 	&.collapsed {
 		flex: 0 0 64px;
@@ -157,6 +186,7 @@
 			}
 		}
 
+		.nav-wrapper {
 			.secondary-nav-items {
 				border-top: 1px solid var(--bg-vanilla-400);
 
@@ -169,3 +199,4 @@
 			}
 		}
 	}
+}

frontend/src/container/SideNav/SideNav.tsx

@@ -375,6 +375,7 @@ function SideNav({
 				</div>
 			)}
 
+			<div className={cx(`nav-wrapper`, isCloudUserVal && 'nav-wrapper-cloud')}>
 				<div className="primary-nav-items">
 					{menuItems.map((item, index) => (
 						<NavItem
@@ -462,6 +463,7 @@ function SideNav({
 					</div>
 				</div>
 			</div>
+		</div>
 	);
 }