From 509ac8a3c0a44e4d602d7eacbfe451ec8f172787 Mon Sep 17 00:00:00 2001 From: Shubh Pingale <135618936+shubhtrek@users.noreply.github.com> Date: Sun, 17 May 2026 23:22:02 +0530 Subject: [PATCH 1/2] fix(css): improve mobile responsiveness for navbar search and header On screens narrower than 996px the search input was expanding to its full intrinsic width, squeezing the logo and hamburger toggle out of view. Category labels inside the lunr-search results modal would also wrap awkwardly or get truncated on sub-400px viewports. Changes in src/css/custom.css: - Constrain .navbar__search to max-width: 160px on mobile so the logo and hamburger always have room (flex-shrink + min-width: 0). - Hide DocSearch placeholder text on mobile (icon-only saves space). - Below 400px: collapse the search box to icon-only width (2.2rem), reduce navbar horizontal padding, lock .navbar__brand with flex-shrink: 0 to prevent logo clipping. - In the lunr-search results dropdown: apply text-overflow: ellipsis to category headings, clamp snippet text to 2 lines, tighten padding. - At 400px and below: stretch the results modal to 100vw with a 60vh max-height and scroll, so it never clips outside the viewport. Fixes #304 Signed-off-by: Shubh Pingale <135618936+shubhtrek@users.noreply.github.com> --- src/css/custom.css | 124 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 3039cf530..d16007067 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -167,4 +167,128 @@ gap: 0.75rem; /* space between icons */ align-items: center; } +} + +/* ───────────────────────────────────────────────────────────────────────────── + Mobile search bar — prevent it from overflowing / crowding the navbar + Fixes: https://github.com/kmesh-net/website/issues/304 +───────────────────────────────────────────────────────────────────────────── */ + +/* Constrain the lunr search button so it never pushes logo/hamburger off screen */ +@media (max-width: 996px) { + /* The lunr-search plugin renders a plain inside .navbar__search */ + .navbar__search { + flex-shrink: 1; + min-width: 0; + max-width: 160px; + } + + .navbar__search-input { + width: 100%; + min-width: 0; + font-size: 0.8rem; + } + + /* DocSearch button (fallback in case algolia is ever re-added) */ + .DocSearch-Button { + width: auto; + max-width: 140px; + padding: 0 0.6rem; + } + + .DocSearch-Button-Placeholder { + display: none; /* hide "Search" text label, keep the icon only */ + } +} + +/* Extra tight on very small phones (< 400 px) */ +@media (max-width: 400px) { + /* Give logo room to breathe */ + .navbar__brand { + flex-shrink: 0; + margin-right: 0.4rem; + } + + /* Shrink navbar padding so content isn't clipped */ + .navbar { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + /* Search bar: icon-only on the tiniest screens */ + .navbar__search { + max-width: 2.2rem; /* just wide enough for the search icon */ + overflow: hidden; + } + + .navbar__search-input { + font-size: 0; + padding: 0 0.3rem; + } + + .navbar__search-input::placeholder { + font-size: 0; /* hide placeholder text, keep the box clickable */ + } +} + +/* ───────────────────────────────────────────────────────────────────────────── + Search results modal — fix category label wrapping on narrow screens + Fixes: https://github.com/kmesh-net/website/issues/304 +───────────────────────────────────────────────────────────────────────────── */ + +@media (max-width: 996px) { + /* Lunr-search results dropdown */ + .search-result-section, + .lunrsearch-results-container { + padding: 0.5rem; + } + + /* Category heading inside results (e.g. "Documentation", "Kmesh Performance") */ + .search-result-section-title, + .lunrsearch-group-label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + font-size: 0.75rem; + letter-spacing: 0.02em; + } + + /* Individual result rows */ + .search-result-match, + .lunrsearch-result-item { + padding: 0.4rem 0.5rem; + } + + /* Result title */ + .search-result-match-title, + .lunrsearch-result-title { + font-size: 0.875rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + /* Result preview snippet */ + .search-result-match-content, + .lunrsearch-result-snippet { + font-size: 0.78rem; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } +} + +@media (max-width: 400px) { + /* On very small screens the modal should span full width */ + .searchResultsWrapper, + .lunrsearch-results-container { + left: 0 !important; + right: 0 !important; + width: 100vw !important; + border-radius: 0; + max-height: 60vh; + overflow-y: auto; + } } \ No newline at end of file From f72895b06425d5924fec9732fcfc6f9a7f5ee87f Mon Sep 17 00:00:00 2001 From: Shubh Pingale <135618936+shubhtrek@users.noreply.github.com> Date: Tue, 19 May 2026 08:37:31 +0530 Subject: [PATCH 2/2] fix(css): address review feedback on mobile search UX and modal width --- src/css/custom.css | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index d16007067..5b4c5075d 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -215,19 +215,26 @@ padding-right: 0.5rem; } - /* Search bar: icon-only on the tiniest screens */ + /* Search bar: icon-only on the tiniest screens, expands when focused */ .navbar__search { max-width: 2.2rem; /* just wide enough for the search icon */ overflow: hidden; + transition: max-width 0.2s ease; + } + + /* When the user taps/focuses the input, give it room to type */ + .navbar__search:focus-within { + max-width: 160px; + overflow: visible; } .navbar__search-input { - font-size: 0; + font-size: 1rem; /* keep ≥ 16px to prevent iOS auto-zoom */ padding: 0 0.3rem; } .navbar__search-input::placeholder { - font-size: 0; /* hide placeholder text, keep the box clickable */ + font-size: 0; /* hide placeholder text, keep the box clickable */ } } @@ -286,7 +293,6 @@ .lunrsearch-results-container { left: 0 !important; right: 0 !important; - width: 100vw !important; border-radius: 0; max-height: 60vh; overflow-y: auto;