Nav folds to mobile at ~1280px and loses search; /search content is flush to the viewport edge

by adom

How the Adom Wiki (wiki.adom.inc) works and how to drive it with the adom-wiki CLI: the two storage layers (git page repo vs package registry), hosting source by pushing files (not a tarball), making packages, cutting per-platform releases, and the three-tier skill layout (user skills ship, dev-skills/ and publish-skills/ stay source-only). adom-wiki is the current tool; adompkg is deprecated. Read this first before publishing or installing.

Overview Files Skills Discover Packages Releases Dependencies Issues8 Breadcrumbs Pull Requests Activity

Closed bug report

Ray · 1mo ago ·closed by Colby Knox

At a laptop half-width viewport the top nav drops to its full mobile layout even though there is ample room, and the search page loses all horizontal padding so its content sits flush against the viewport edge.

Measured from the attached screenshots: 1276 x 1390 and 1280 x 1392.

1. Nav collapses to the hamburger far too early

At 1276px the nav is: logo, a book icon, the notification bell (52), the account chip, and a hamburger. The search bar is gone. Losing search is the part that hurts, because at this width there is clearly room for it -- the whole right two-thirds of the bar is empty.

Half-width on a laptop is a normal way to use the wiki (docs on one side, work on the other), so this is not an edge case. Asked for by the reporter: keep the elements stretched out and bring the search bar back rather than folding to mobile.

2. `/search` has no horizontal padding at this width

https://wiki.adom.inc/search?q=tx4140

"Search", "1 result for tx4140", the All/hardware filter chips and the Sort row all start at x = 0, hard against the left edge, and the result card is full-bleed to both edges. The footer is still centred correctly, so the container padding is being dropped for the main column only.

The page body of a component page is fine at the same width -- this is specific to /search. The nav issue affects both.

3. "On this page" TOC is missing

Noted separately by Colby on the same report: at this width the "On this page" table of contents does not render.

Repro

Open https://wiki.adom.inc/search?q=tx4140
Size the window to ~1280px wide (half a 2560px laptop screen)
Nav shows the hamburger and no search bar; the results column is flush left

nav1

nav2

2 Replies

Colby Knox · 1mo ago

Two of the three fixed on staging (git-wiki 9c71732; rides the next prod tag):

Nav: the links still fold into the overflow menu at 1200px, but the search bar stays until the 900px mobile block. Measured on staging at a 1276px viewport: the search input is visible at 340px wide.
/search: .search-page set a padding shorthand on the same element as .container, which zeroed the side padding, so below ~1250px the column touched the edge. It now sets only top and bottom padding; the container's 24px sides apply. Measured: the heading's left edge is at 62px at 1276px.
The "On this page" rail is a >=1600px feature by design: it is an absolute column that needs gutter room outside the 1200px content container, so at 1280px there is no room for it without narrowing the content. Left as is; say if you want a different threshold.

If the fold still happens for you at 1276px after the prod tag, check the browser zoom: at 110% a 1276px window is 1160 CSS px, which is under the 1200px breakpoint.

Colby Knox · 1mo ago

On prod as of git-wiki aba6ac4 (18:25 today). The /search column keeps its side padding and the nav keeps its search bar to 900px; the rail stays a 1600px feature by design. Closing; reopen if it does not hold for you.

Adom Wiki