Pin the listing sidebar by its bottom so the sponsors show early - #88
Merged
Merged
Conversation
The sidebar on a listing page is taller than the window -- 2,175px on a 768px screen -- but was pinned by its top, so only its first screenful was ever visible. The sponsors sit below that and stayed out of view until the main column ended, 11,735px down on Context7. - A hook sets a negative sticky top (window height minus sidebar height), so the sidebar scrolls with the page until its last panel shows, then holds. The browser does the scrolling; there is no scroll listener - It recalculates when the window or the sidebar changes size, and LiveView is told the style is the client's so a patch does not strip it - Same speed as the page: the sponsor block is taller than the visible sidebar, so a faster sidebar would scroll the tiles past unseen - Below the lg breakpoint the sidebar stacks under the content, unchanged Closes #87 --- Pages affected: - [Context7 MCP](https://ai.mcpharbor.dev/servers/io.github.upstash/context7) -- the listing the fix was measured on. - [browse MCP servers](https://ai.mcpharbor.dev/servers) -- every listing it leads to. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #87.
The problem, measured
On Context7 at 1024×768:
Pinned by its top, the sidebar showed only its first screenful until the main column ran out, so the sponsors stayed out of view until near the end of the page.
The fix
Pin it by its bottom: a colocated hook sets
topto window height − sidebar height − 24px (negative when the sidebar is taller than the window). The sidebar then scrolls with the page until its last panel is in view, and holds there. The browser does the scrolling — there is no scroll listener. The hook recalculates on window resize and whenever the sidebar changes height (README loading, tabs, secrets), andJS.ignore_attributes(["style"])stops LiveView patches from stripping the value.Tried on the live page before writing it:
Same speed as the page, not faster. The sponsor block (1,127px) is taller than the visible sidebar, so a sidebar that raced to its bottom would scroll the tiles past before anyone saw them.
Below the
lgbreakpoint the sidebar stacks under the content and is left alone.Tests: 232 passing; the new one checks the hook and the attribute guard are wired. The scrolling itself is verified in a browser after deploy.
Pages affected:
🤖 Generated with Claude Code