Fix mobile navigation sidebar layout for small screens

Add styles for mobile navigation sidebar to prevent overlap and improve layout under 480px.

Author: nancy-verma780

src/css/custom.css

@@ -173,6 +173,7 @@
  * - active-sidebar-override.css
  */
 
+
 /* ================= SECTION 1: BASIC MENU STRUCTURE ================= */
 
 /* Fix menu overflow and ensure proper display */
@@ -2718,3 +2719,21 @@ html[data-theme="dark"] .blog-post-page .markdown h4 {
   margin-top: 15px !important;
 }
 
+/* Fix mobile navigation sidebar overlap and layout alignment under 480px */
+@media screen and (max-width: 480px) {
+  .theme-doc-sidebar-container {
+    width: 100% !important;
+    position: fixed !important;
+    z-index: 9999 !important;
+    padding: 12px !important;
+  }
+  
+  .docMainContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Main-styles-module {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+  }
+}
+
+
+
+