Give the section headings line room, and drop the pseudo-element

f40ff303db31 · AtlantisPleb · · parent a06751195cef

Give the section headings line room, and drop the pseudo-element

My previous attempt fixed `.sidebar-row__label`, which was not what was
clipping: none of the visible nav rows have a descender, so the only clipped
text was the section headings, and those carry a different rule.

The headings get the same treatment the row labels got -- a 24px line box
instead of 20px, so the tails of g, y and p are not sitting on its edge.

The `::before` added last commit is gone. It was an absolutely positioned,
opaque box inside a sticky element with a `z-index`, which paints it above
that element's own text: a real hazard, and a suspect for exactly this
symptom. The band it was covering is removed at the source instead -- the
navs' block padding, which is the gap a sticky heading cannot reach over.
Both rails lose it, so the heading now sticks flush to the scrollport edge and
there is nothing above it to show through.

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>

Deploy story

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

Not deployed through the forge lane

No push, promotion, build, or deploy receipt references this commit (receipts are scanned over a bounded recent window). Changes shipped by full node replacement carry their proof in the release gate receipt instead.

Changed files

  • modified assets/css/app.css

Diff

1 file changed, +11 -19

assets/css/app.css modified +11 -19

@@ -262,7 +262,11 @@

262 262
  flex: none;
263 263
  flex-direction: column;
264 264
  gap: 1px;
265
  padding-block: 2px;
265
  /* No block padding. A sticky section heading sticks to the scrollport edge,
266
     and any padding above that edge is a band the heading cannot cover, so
267
     rows scrolled through it. Removing the gap is the fix; painting over it
268
     with a pseudo-element put an opaque box inside a z-indexed sticky element,
269
     which is a good way to cover the heading's own text. */
266 270
}
267 271
268 272
.sidebar-nav[aria-label="OpenAgents tools"] {

@@ -415,6 +419,9 @@

415 419
     it is horizontally. Uppercasing it with tracking made it shout a word the
416 420
     reader already scanned past. */
417 421
  min-height: 32px;
422
  /* Same reason as `.sidebar-row__label`: at 20px the line box ends on the
423
     baseline's shoulder and the tails of g, y and p sit on the edge of it. */
424
  line-height: 1.5rem;
418 425
  margin-inline: 12px;
419 426
  padding-inline: 8px;
420 427
  /* Sticky, so it needs an opaque fill for rows to scroll under -- but it must

@@ -424,21 +431,6 @@

424 431
  color: var(--text-muted);
425 432
  font-size: 0.875rem;
426 433
  font-weight: 400;
427
  line-height: 1.25rem;
428
}
429
430
/* A sticky element sticks to the scrollport's edge, and the nav has block
431
   padding, so rows scrolling past stayed visible in the few pixels above the
432
   heading -- they appeared to bleed through it. This carries the heading's own
433
   fill up over that band. Inline it reaches past the heading's margins as
434
   well, so a row cannot show beside it either. */
435
.sidebar-section-label::before {
436
  content: "";
437
  position: absolute;
438
  inset-inline: -12px;
439
  bottom: 100%;
440
  height: 12px;
441
  background: inherit;
442 434
}
443 435
444 436
/* Docs layout */

@@ -461,10 +453,10 @@

461 453
  display: flex;
462 454
  flex: 1;
463 455
  flex-direction: column;
464
  /* The same rhythm as .sidebar-nav. These two rails differ in exactly one
465
     way -- this one scrolls -- and nothing else about them should. */
456
  /* The same rhythm as .sidebar-nav, including its lack of block padding: a
457
     sticky heading cannot cover a band above the scrollport edge, so rows
458
     scrolled visibly through it. */
466 459
  gap: 1px;
467
  padding-block: 2px;
468 460
  overflow-y: auto;
469 461
  overscroll-behavior: none;
470 462
}

This page updates live while a promote is in flight · changelog