From 73a3b3d3afd230a542ca3857bc6b509bcef7b79b Mon Sep 17 00:00:00 2001
From: Logan Besecker <me@LoganBesecker.com>
Date: Thu, 1 Oct 2026 13:20:54 -0700
Subject: [PATCH] Pin the listing sidebar by its bottom so the sponsors show
 early

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>
---
 lib/mcp_registry_web/live/server_live/show.ex | 47 ++++++++++++++++++-
 .../live/server_live_test.exs                 | 14 ++++++
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/lib/mcp_registry_web/live/server_live/show.ex b/lib/mcp_registry_web/live/server_live/show.ex
index d7a85a3..d84ae28 100644
--- a/lib/mcp_registry_web/live/server_live/show.ex
+++ b/lib/mcp_registry_web/live/server_live/show.ex
@@ -521,7 +521,52 @@ defmodule McpRegistryWeb.ServerLive.Show do
           </section>
         </div>
 
-        <aside class="min-w-0 space-y-6 self-start lg:sticky lg:top-32 lg:col-span-4">
+        <%!-- Taller than the screen, so pinning it by its top hid everything below
+              the first screenful -- the sponsors included -- until the main column
+              ran out, often 10,000 words later. .StickyAside pins it by its bottom
+              instead: it scrolls with the page until its last panel is in view,
+              then stays. The style it sets is the client's, so patches keep it. --%>
+        <aside
+          id="listing-aside"
+          phx-hook=".StickyAside"
+          phx-mounted={JS.ignore_attributes(["style"])}
+          class="min-w-0 space-y-6 self-start lg:sticky lg:top-32 lg:col-span-4"
+        >
+          <script :type={Phoenix.LiveView.ColocatedHook} name=".StickyAside">
+            // Sticky with a negative top: the browser scrolls the sidebar with
+            // the page until its bottom meets the bottom of the window, then
+            // holds it there. No scroll listener -- only a recalculation when
+            // the window or the sidebar changes size.
+            const PINNED_TOP = 128 // lg:top-32, clear of the header and rail
+            const GAP = 24 // breathing room under the last panel
+
+            export default {
+              mounted() {
+                this.wide = window.matchMedia("(min-width: 1024px)")
+                this.update = () => {
+                  // Below lg the sidebar stacks under the content; leave it be.
+                  if (!this.wide.matches) return (this.el.style.top = "")
+                  const height = this.el.offsetHeight
+                  const fits = PINNED_TOP + height + GAP <= window.innerHeight
+                  this.el.style.top = fits ? "" : `${window.innerHeight - height - GAP}px`
+                }
+                // Panels change height after load (README, tabs, secrets).
+                this.observer = new ResizeObserver(this.update)
+                this.observer.observe(this.el)
+                window.addEventListener("resize", this.update)
+                this.wide.addEventListener("change", this.update)
+                this.update()
+              },
+              updated() {
+                this.update()
+              },
+              destroyed() {
+                this.observer.disconnect()
+                window.removeEventListener("resize", this.update)
+                this.wide.removeEventListener("change", this.update)
+              }
+            }
+          </script>
           <.panel
             :if={@server.env_vars != []}
             title="Secrets and scopes"
diff --git a/test/mcp_registry_web/live/server_live_test.exs b/test/mcp_registry_web/live/server_live_test.exs
index 7324d6e..4ac67dc 100644
--- a/test/mcp_registry_web/live/server_live_test.exs
+++ b/test/mcp_registry_web/live/server_live_test.exs
@@ -80,6 +80,20 @@ defmodule McpRegistryWeb.ServerLiveTest do
                ~s(and Cursor Context7 using MCP so I can use them in Claude Code and Grok Bot.")
   end
 
+  test "the sidebar is pinned by its bottom, and keeps the style the client sets", %{conn: conn} do
+    server = server_fixture()
+    {:ok, view, _html} = live(conn, "/servers/#{server.name}")
+
+    aside = view |> element("#listing-aside") |> render()
+
+    # The hook scrolls the sidebar with the page until its last panel shows,
+    # so the sponsors are reached early rather than at the end of the page.
+    assert aside =~ ~s(phx-hook="McpRegistryWeb.ServerLive.Show.StickyAside")
+    # It sets `style` from the browser; a patch must not strip it.
+    assert aside =~ "ignore_attrs"
+    assert aside =~ "sponsors-heading"
+  end
+
   describe "browsing by tag is gone" do
     test "neither the directory nor the home page offers it", %{conn: conn} do
       server_fixture(%{tags: ["weather"]})