fix: resolve hamburger menu breakpoint bug in docs (#3318)

documentation/src/css/custom.css

@@ -306,6 +306,8 @@ html[data-theme="light"] .hide-in-light {
   display: flex;
   align-items: center;
   transition: opacity 0.3s ease, transform 0.3s ease;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 }
 
 .navbar__toggle {
@@ -314,6 +316,19 @@ html[data-theme="light"] .hide-in-light {
   transform: scale(0.8);
 }
 
+/*
+ * No margin is needed for the branding right now,
+ * since there is padding on the items and no brand text.
+ * If those things change, you may want to revert this.
+*/
+.navbar__brand {
+  margin-right: 0px;
+}
+
+.navbar__logo {
+  margin-right: 0px;
+}
+
 /* Dropdown styles */
 .navbar__link--active {
   color: var(--text-prominent);
@@ -338,7 +353,7 @@ html[data-theme="light"] .hide-in-light {
 }
 
 /* Force hamburger menu to appear earlier to prevent navbar overlap with smooth transitions */
-@media (max-width: 1450px) {
+@media (max-width: 996px) {
   .navbar__item {
     opacity: 0;
     transform: translateX(-10px);
@@ -358,8 +373,15 @@ html[data-theme="light"] .hide-in-light {
   }
 }
 
+/* Shrink inkeep search box some on smaller screens */
+@media (max-width: 1450px) {
+  #inkeep {
+    max-width: 180px;
+  }
+}
+
 /* Ensure navbar items are visible above the breakpoint */
-@media (min-width: 1451px) {
+@media (min-width: 997px) {
   .navbar__item {
     opacity: 1;
     transform: translateX(0);
@@ -378,4 +400,3 @@ html[data-theme="light"] .hide-in-light {
   object-fit: cover; /* Ensure the image covers the area while maintaining aspect ratio */
   border-radius: 8px; /* Optional: rounded corners */
 }
-