Skip to content

fix(css): improve mobile responsiveness for navbar search and header #329

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

Open
shubhtrek wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(css): improve mobile responsiveness for navbar search and header #329

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
92 changes: 92 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,4 +167,96 @@
gap: 0.75rem; /* space between icons */
align-items: center;
}
}

/* =====================================================
Mobile Navbar Search Responsiveness (fixes #304)
===================================================== */

/* 996px and below: constrain search so logo + hamburger always fit */
@media (max-width: 996px) {
.navbar__search {
max-width: 160px;
flex-shrink: 1;
min-width: 0;
}

/* Hide the placeholder text — icon-only saves horizontal space */
.navbar__search input::placeholder,
.DocSearch-Button-Placeholder {
display: none;
}
Comment on lines +184 to +188

/* Lock the brand (logo + title) so it never gets squeezed out */
.navbar__brand {
flex-shrink: 0;
}
}

/* Below 400px: allow search to expand fully when focused,
collapse to icon-only when idle.
NOTE: font-size kept ≥ 16px to prevent iOS Safari auto-zoom. */
@media (max-width: 400px) {
.navbar__search {
max-width: 2.2rem;
transition: max-width 0.2s ease;
}

.navbar__search:focus-within {
max-width: 100%;
}
Comment on lines +205 to +207

@gemini-code-assist gemini-code-assist Bot Jul 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

high

On extremely narrow viewports (under 400px), setting max-width: 100% on focus can cause the search bar to push other elements (like the logo or hamburger menu) completely out of the viewport or trigger horizontal overflow. Since .navbar__brand has flex-shrink: 0 to prevent logo clipping, the combined width of the brand, the expanded search bar, and the hamburger toggle will exceed the viewport width.

To prevent this layout breakage, constrain the expanded width of the search bar to the remaining available space using a dynamic calc() function.

Suggested change
.navbar__search:focus-within {
max-width: 100%;
}
.navbar__search:focus-within {
max-width: calc(100vw - 150px);
}


/* Reduce navbar horizontal padding on very small screens */
.navbar {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}

/* =====================================================
Lunr Search Results Modal — Mobile Improvements
===================================================== */

/* Truncate long category headings with ellipsis */
.search-result-match__category,
[class*="searchResultItem"] h3,
[class*="lunr"] .category-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Comment on lines +220 to +227

/* Clamp snippet text to 2 lines on mobile */
@media (max-width: 996px) {
.search-result-match__summary,
[class*="searchResultItem"] p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.85rem;
}

/* Tighten internal padding of result items */
[class*="searchResultItem"],
.search-result-match {
padding: 0.4rem 0.6rem;
}
}

/* At 400px and below: stretch results modal to full viewport width
Use left:0 + right:0 (not width:100vw) to avoid horizontal overflow
caused by scrollbar width on some browsers. */
@media (max-width: 400px) {
[class*="searchResultsContainer"],
.lunr-search-results,
#lunr-search-results-container {
position: fixed;
left: 0;
right: 0;
max-height: 60vh;
overflow-y: auto;
border-radius: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
Comment on lines +251 to +261

@gemini-code-assist gemini-code-assist Bot Jul 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

medium

When using position: fixed on the search results container, omitting the top property can lead to highly inconsistent vertical positioning across different mobile browsers (especially on iOS Safari when the virtual keyboard is active). The browser will fall back to the element's "static position", which can cause the results modal to overlap the search input itself or render off-screen.

Additionally, without an explicit z-index, the modal might render behind other fixed or sticky elements on the page (such as the mobile sidebar, back-to-top button, or table of contents).

To ensure consistent rendering and visibility, explicitly define top (using Docusaurus's navbar height variable --ifm-navbar-height) and a safe z-index.

  [class*="searchResultsContainer"],
  .lunr-search-results,
  #lunr-search-results-container {
    position: fixed;
    top: var(--ifm-navbar-height, 3.75rem);
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: var(--ifm-z-index-dropdown, 100);
  }

}
Loading