From 4f56bd954dbdbd43542163a4bd4cb04944eddd01 Mon Sep 17 00:00:00 2001
From: SAHIL CHACHANE <sahilchachane11@gmail.com>
Date: Sun, 31 May 2026 21:19:56 +0530
Subject: [PATCH 1/2] update in navbar

---
 src/css/custom.css | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 00a74527..b32fe018 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -443,6 +443,7 @@ html[data-theme="dark"] article blockquote {
   margin: 0;
   height: 60px;
   display: flex;
+  width: 100%;
 }
 
 .navbar__brand {
@@ -501,6 +502,7 @@ html[data-theme="dark"] article blockquote {
   gap: 0.3rem !important;
   margin: 0 !important;
   padding: 0 !important;
+  min-width: 0;
 }
 
 .mb-10.text-center>p.mx-auto.max-w-3xl {
@@ -527,12 +529,14 @@ html[data-theme="dark"] article blockquote {
   padding: 0.3rem 0.5rem;
   font-size: 0.85rem;
   line-height: 1.2;
+  white-space: nowrap;
 }
 
 .navbar__link {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  white-space: nowrap;
 }
 
 /* Fix icon alignment in navbar */
@@ -746,14 +750,21 @@ body {
 }
 
 /* ===== SECTION 11: CRITICAL FIX: TABLET/IPAD NAVBAR BEHAVIOR ===== */
-@media screen and (max-width: 996px) {
+@media screen and (max-width: 1200px) {
   /* Hide TOP navbar items on mobile (not sidebar) */
 
   /*
-  * Hide all navbar items on small screens except the toggle, brand,
-  * and the Clerk auth control.
+  * Hide top-level navbar items before they collide. Docusaurus' default
+  * mobile breakpoint is 996px, but this navbar has enough links to overflow
+  * on tablets and smaller laptops.
   */
-  .navbar__items .navbar__item:not(.navbar__toggle):not(.navbar__brand):not( :has(#firebase-auth-github-navbar)) {
+  .navbar__inner>.navbar__items>.navbar__item:not(.navbar__toggle):not(:has(#clerk-auth-navbar)) {
+    display: none !important;
+  }
+
+  .navbar__items--right>.navbar__item:not(:has(#clerk-auth-navbar)),
+  .navbar__items--right .algolia-sitesearch-navbar,
+  .navbar__items--right .colorModeToggle {
     display: none !important;
   }
 
@@ -778,11 +789,13 @@ body {
     max-width: 100% !important;
     padding: 0 !important;
     width: 100% !important;
+    gap: 0.5rem !important;
   }
 
   /* Logo and brand adjustments */
   .navbar__brand {
-    margin-right: 1.5rem !important;
+    min-width: 0 !important;
+    margin-right: auto !important;
   }
 
   .navbar__logo {
@@ -791,11 +804,16 @@ body {
 
   .navbar__title {
     font-size: 1rem !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
   }
 
   /* Ensure sidebar toggle is always visible */
   .navbar__toggle {
-    display: block !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    flex: 0 0 auto !important;
     margin-right: 0.5rem !important;
   }
 
@@ -2827,4 +2845,4 @@ html[data-theme="dark"] .blog-post-page article header h2[itemprop="headline"] {
     padding-left: 16px !important;
     padding-right: 16px !important;
   }
-}
\ No newline at end of file
+}

From b6839d818230fae4766faa7e31cff4ce409574bf Mon Sep 17 00:00:00 2001
From: SAHIL CHACHANE <sahilchachane11@gmail.com>
Date: Sun, 31 May 2026 21:30:41 +0530
Subject: [PATCH 2/2] update navbar

---
 src/css/custom.css | 88 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)

diff --git a/src/css/custom.css b/src/css/custom.css
index b32fe018..8b0df66a 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -2690,6 +2690,94 @@ html[data-theme="dark"] .blog-post-page article header h2[itemprop="headline"] {
    END SECTION 15
    ===================================================== */
 
+/* ===== RESPONSIVE NAVBAR OVERFLOW FIX ===== */
+@media screen and (min-width: 1401px) {
+  .navbar__inner {
+    gap: 0.5rem !important;
+  }
+
+  .navbar__items:not(.navbar__items--right) {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+  }
+
+  .navbar__items--right {
+    flex: 0 0 auto !important;
+  }
+
+  .navbar__items>.navbar__item {
+    flex: 0 0 auto !important;
+  }
+}
+
+@media screen and (max-width: 1400px) {
+  .navbar,
+  .navbar .navbar__inner {
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow: visible !important;
+  }
+
+  .navbar .navbar__inner {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    gap: 0.5rem !important;
+  }
+
+  .navbar .navbar__items {
+    min-width: 0 !important;
+  }
+
+  .navbar .navbar__items:not(.navbar__items--right) {
+    flex: 1 1 auto !important;
+    overflow: hidden !important;
+  }
+
+  .navbar .navbar__items--right {
+    flex: 0 0 auto !important;
+    margin-left: auto !important;
+  }
+
+  .navbar .navbar__toggle {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    flex: 0 0 40px !important;
+    width: 40px !important;
+    height: 40px !important;
+  }
+
+  .navbar .navbar__brand {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    margin-right: 0 !important;
+    overflow: hidden !important;
+  }
+
+  .navbar .navbar__title {
+    min-width: 0 !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+
+  .navbar__inner>.navbar__items>.navbar__item:not(.navbar__toggle),
+  .navbar__items--right>.navbar__item,
+  .navbar__items--right .algolia-sitesearch-navbar,
+  .navbar__items--right .colorModeToggle {
+    display: none !important;
+  }
+
+  .navbar-sidebar .navbar__item,
+  .navbar-sidebar .navbar__link,
+  .navbar-sidebar .dropdown {
+    display: block !important;
+    white-space: normal !important;
+  }
+}
+
 /* ===== MOBILE TOP-GAP FIX ===== */
 @media screen and (max-width: 996px) {