Cover the sticky heading, and lead the docs shells with the mark

A sticky element sticks to the scrollport's edge, and the nav carries block
padding, so rows scrolling past stayed visible in the few pixels above a
section heading and read as bleeding through it. The heading's own fill now
carries up over that band, and past its inline margins, so nothing can show
above or beside it.

The docs and component shells lead with the favicon instead of the word.
"OpenAgents | Docs" said the brand twice — the mark and the section name are
the two useful halves, and the wordmark between them was the third.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0149rBWy7br1Z7bbz9NrQhEr

Co-Authored-By

Claude Opus 5 (1M context) <noreply@anthropic.com>

Claude-Session

https://claude.ai/code/session_0149rBWy7br1Z7bbz9NrQhEr

Deploy story

What this commit did to the running system — joined from the forge receipt chain, the part a commit page elsewhere cannot show.

Changed files

• modified assets/css/app.css
• modified assets/css/openagents.css
• modified lib/openagents_web/components/layouts.ex

Diff

3 files changed, +28 -1

  line-height: 1.25rem;

}

/* A sticky element sticks to the scrollport's edge, and the nav has block

   padding, so rows scrolling past stayed visible in the few pixels above the

   heading -- they appeared to bleed through it. This carries the heading's own

   fill up over that band. Inline it reaches past the heading's margins as

   well, so a row cannot show beside it either. */

.sidebar-section-label::before {

  content: "";

  position: absolute;

  inset-inline: -12px;

  bottom: 100%;

  height: 12px;

  background: inherit;

}

/* Docs layout */

.docs-layout {

    font-variant-numeric: tabular-nums;

  }

}

@layer components {

  /* The mark, not the word. The wordmark repeated the page title beside it

     ("OpenAgents | Docs") and the section name is the useful half. */

  .sidebar-brand__mark img {

    display: block;

    width: 20px;

    height: 20px;

    border-radius: 4px;

  }

}

  def sidebar_brand(assigns) do

    ~H"""

    <header class="sidebar-brand">

      <.link navigate={~p"/"} class="sidebar-brand__mark">OpenAgents</.link>

      <.link navigate={~p"/"} class="sidebar-brand__mark" aria-label="OpenAgents home">

        <img src={~p"/favicon-32x32.png"} alt="" width="20" height="20" />

      </.link>

      <span :if={@title} class="sidebar-brand__divider" aria-hidden="true"></span>

      <.link :if={@title} patch={@path} class="sidebar-brand__title">{@title}</.link>

    </header>