Sidebar labels stop losing their descenders, and the mark grows

`.sidebar-row__label` carries `overflow: hidden` so its text can ellipsis, and
that also makes the span a block whose height is exactly its line box. At the
row's 20px line height the box ended on the baseline's shoulder, so the tails
of g, j, p, q and y were sliced off. The line box gets 4px more to sit in; the
row's height comes from `min-height`, so nothing else moves.

The favicon in the docs and component shells goes from 20px to 24px, with the
intrinsic size on the element matched so it is not resampled.

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, +10 -4

}

.sidebar-row__label {

  /* `overflow: hidden` is what makes the ellipsis work, and it also makes this

     span a block whose height is exactly its line box. At the row's 20px line

     height that box ends on the baseline's shoulder, so the tails of g, j, p,

     q and y were sliced off. The line box gets 4px more to sit in; the row's

     own height is set by `min-height`, so nothing moves. */

  overflow: hidden;

  line-height: 1.5rem;

  white-space: nowrap;

  text-overflow: ellipsis;

}

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

  .sidebar-brand__mark img {

    display: block;

    width: 20px;

    height: 20px;

    border-radius: 4px;

    width: 24px;

    height: 24px;

    border-radius: 5px;

  }

}

    ~H"""

    <header class="sidebar-brand">

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

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

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

      </.link>

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

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