Fix: Navbar is broken in small screens #2105

keephq · Oct 14, 2024 · d5d088c · d5d088c
1 parent 8a2d747
commit d5d088c
Showing 1 changed file with 46 additions and 1 deletion.
diff --git a/keep-ui/components/navbar/Navbar.css b/keep-ui/components/navbar/Navbar.css
@@ -1,3 +1,48 @@
 .scrollable-menu-shadow {
   box-shadow: inset 0 -10px 10px -10px rgba(0, 0, 0, 0.1);
-}
+  max-height: calc(100vh - 60px); 
+  overflow-y: auto;
+}
+
+@media (max-width: 768px) {
+  .scrollable-menu-shadow {
+    padding: 0;
+    max-height: calc(100vh - 50px);
+  }
+
+  .menu-item {
+    font-size: 14px;
+  }
+
+  .user-info,
+  .search,
+  .submenu-links {
+    display: block;
+    width: 100%;
+  }
+
+  .minimize-menu-button {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    z-index: 1000;
+  }
+}
+
+.menu {
+  display: flex;
+  flex-direction: column; 
+  height: 100vh;
+}
+
+.menu > div {
+  flex: 1; 
+  overflow-y: auto;
+}
+
+.submenu-links {
+  position: relative;
+  z-index: 10;
+}
+
+