Skip to content

fix: mobile nav bar #701

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DenhamPreen merged 1 commit into from
Sep 1, 2025
Merged

fix: mobile nav bar #701

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,6 +370,47 @@ table td {
color: #000000;
}

/* Ensure mobile navbar sidebar uses full viewport height */
.navbar-sidebar {
top: 0; /* start at very top */
bottom: 0;
height: 100dvh; /* modern mobile viewport unit */
display: flex;
flex-direction: column;
}

@supports not (height: 100dvh) {
.navbar-sidebar {
height: 100vh; /* fallback */
}
}
Comment on lines +382 to +386
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Sep 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Fallback incomplete: .navbar-sidebar__items still uses 100dvh

On browsers without 100dvh, the calc() using 100dvh in the items block becomes invalid, breaking layout.

 @supports not (height: 100dvh) {
   .navbar-sidebar {
     height: 100vh; /* fallback */
   }
+  .navbar-sidebar__items {
+    height: calc(100vh - var(--ifm-navbar-height));
+    max-height: calc(100vh - var(--ifm-navbar-height));
+  }
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
@supports not (height: 100dvh) {
.navbar-sidebar {
height: 100vh; /* fallback */
}
}
@supports not (height: 100dvh) {
.navbar-sidebar {
height: 100vh; /* fallback */
}
.navbar-sidebar__items {
height: calc(100vh - var(--ifm-navbar-height));
max-height: calc(100vh - var(--ifm-navbar-height));
}
}


.navbar-sidebar__items {
margin-top: var(--ifm-navbar-height);
height: calc(100dvh - var(--ifm-navbar-height));
max-height: calc(100dvh - var(--ifm-navbar-height));
overflow: visible; /* avoid clipping links; let inner list handle scroll */
flex: 1 1 auto;
}

/* Let the inner list area scroll instead of the container */
.navbar-sidebar__item.menu {
overflow-y: auto;
}
Comment on lines +388 to +399
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Sep 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Scrollable area assigned to wrong element; results in no scrolling

The container (.navbar-sidebar__items) has fixed height but overflow: visible; putting overflow-y: auto on the inner .menu won’t create a scrollable region. The scroll should live on the sized container.

 .navbar-sidebar__items {
   margin-top: var(--ifm-navbar-height);
   height: calc(100dvh - var(--ifm-navbar-height));
   max-height: calc(100dvh - var(--ifm-navbar-height));
-  overflow: visible; /* avoid clipping links; let inner list handle scroll */
+  overflow: hidden; /* contain contents */
+  overflow-y: auto; /* scrolling lives here */
+  -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
   flex: 1 1 auto;
 }
 
 /* Let the inner list area scroll instead of the container */
 .navbar-sidebar__item.menu {
-  overflow-y: auto;
+  overflow: visible; /* no scroll here */
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.navbar-sidebar__items {
margin-top: var(--ifm-navbar-height);
height: calc(100dvh - var(--ifm-navbar-height));
max-height: calc(100dvh - var(--ifm-navbar-height));
overflow: visible; /* avoid clipping links; let inner list handle scroll */
flex: 1 1 auto;
}
/* Let the inner list area scroll instead of the container */
.navbar-sidebar__item.menu {
overflow-y: auto;
}
.navbar-sidebar__items {
margin-top: var(--ifm-navbar-height);
height: calc(100dvh - var(--ifm-navbar-height));
max-height: calc(100dvh - var(--ifm-navbar-height));
overflow: hidden; /* contain contents */
overflow-y: auto; /* scrolling lives here */
-webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
flex: 1 1 auto;
}
/* Let the inner list area scroll instead of the container */
.navbar-sidebar__item.menu {
overflow: visible; /* no scroll here */
}
🤖 Prompt for AI Agents 
In src/css/custom.css around lines 388 to 399, the scrollable area is assigned
to the inner .navbar-sidebar__item.menu while the sized container
.navbar-sidebar__items has overflow: visible, so no scrolling occurs; change
overflow on the sized container to create the scrollable region by setting
.navbar-sidebar__items to overflow-y: auto (or overflow: auto) and remove
overflow-y: auto from .navbar-sidebar__item.menu so the element with fixed
height handles scrolling.


/* While sidebar is open, ensure clicks go to the sidebar, not the navbar */
.navbar.navbar-sidebar--show .navbar__inner {
pointer-events: none;
}

.navbar.navbar-sidebar--show .navbar-sidebar {
z-index: 10001;
}
Comment on lines +406 to +408
Copy link
Copy Markdown
Contributor Author

@DenhamPreen DenhamPreen Sep 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is needed to show in front of the "ask ai" box


.navbar.navbar-sidebar--show .navbar-sidebar__backdrop {
z-index: 10000;
}

/* Clean doc item styling */
.theme-doc-markdown {
line-height: 1.7;
Expand Down