Sidebar spacing, a header that fits, and no phantom scroll on the homepage

d0a2c4659a2b · AtlantisPleb · 7d ago · parent 57d5fd933cfd

Sidebar spacing, a header that fits, and no phantom scroll on the homepage

The sidebar glyph was 20px beside 14px text, which made it the larger of the
two and inverted what a row is about: the word is the destination and the
glyph is a hint. It is 16px now, and sits 12px from its label rather than 8.
The rail narrows from 280px to 240px and the command bar from 64px to 52px.

Section headings were the one sidebar row that did not respond to a pointer.
`.sidebar-section-label` is unlayered and sets `color`, so the layered
`.sidebar-section__summary:hover` could never win -- the fourth time this
layered-versus-unlayered split has silently eaten a rule. The hover is
declared where it can take effect.

Documentation prose fills its column. It was capped at 68ch, which on a wide
screen left a narrow ribbon of text beside a large empty margin.

And the homepage scrolled sideways into nothing. The hero's glow is two
ellipses scaled 2.5x and 2x past their own box, and a scaled element paints
outside it; `.cta` already clipped for exactly this reason and the hero never
did. Sections now clip on the x axis -- `clip` rather than `hidden`, so a
section does not become a scroll container and sticky behaviour inside it is
unaffected -- and the scrolling page refuses horizontal overflow outright,
because a decorative element should never be able to widen the document.

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.

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
modified assets/css/openagents.css
modified lib/openagents_web/components/layouts.ex

Diff

3 files changed, +33 -7

  min-height: 0;
  flex: none;
  flex-direction: column;
  width: 280px;
  width: 240px;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--line);

  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  gap: 12px;
  /* 32px rows sitting 1px apart. The previous 36px row with 6px of block
     padding and 4px between rows spent roughly half the sidebar's height on
     space between things rather than on the things. */

  pointer-events: none;
}

/* Smaller than the row's type and held further from it. A 20px glyph beside
   14px text reads as the larger of the two, which inverts what the row is
   about: the word is the destination and the glyph is a hint. */
.sidebar-row__icon {
  display: inline-flex;
  width: 20px;
  width: 16px;
  flex: none;
  justify-content: center;
  color: currentColor;
  font-size: 1.25rem;
  font-size: 16px;
}

.sidebar-row__label {

  padding-block-end: 6px;
}

/* Declared here, not in the style pack. `.sidebar-section-label` is unlayered
   and sets `color`, so the layered `.sidebar-section__summary:hover` could
   never win and the heading was the one sidebar row that did not respond to a
   pointer. */
@media (hover: hover) {
  .sidebar-section-label:hover {
    color: var(--text-primary);
  }
}

.sidebar-section-label {
  position: sticky;
  z-index: 1;


  .docs-prose {
    min-width: 0;
    max-width: 68ch;
    /* Fills its column. The measure was capped at 68ch, which left a wide
       screen with a narrow ribbon of text beside a large empty margin; the
       column itself is what bounds the line now. */
    max-width: none;
    flex: 1;
    color: var(--text-body);
  }

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    gap: 12px;
    min-height: 32px;
    margin-inline: 12px;
    padding-inline: 8px;

@layer components {
  .landing-section {
    position: relative;
    /* Glows are scaled well past their own box -- 2.5x on the wash -- and a
       scaled element paints outside it. Unclipped, the hero's glow widened the
       page and left a band of empty scroll to the right of every section.
       `clip` rather than `hidden`: it does not make the section a scroll
       container, so sticky and anchor behaviour inside it are unaffected. */
    overflow-x: clip;
    border-bottom: 1px solid var(--line-faint);
    padding: 64px 24px;
  }

    min-height: 0;
    flex: 1;
    overflow-y: auto;
    /* The scroll container is the last place horizontal overflow can surface,
       so it refuses it outright: a decorative element must never be able to
       give the page a horizontal scrollbar. */
    overflow-x: hidden;
    overscroll-behavior: none;
  }



  defp openagents_command_bar(assigns) do
    ~H"""
    <header class="flex items-center gap-2 bg-background border-b border-border px-4 h-16 shrink-0">
    <header class="flex items-center gap-2 bg-background border-b border-border px-4 h-[52px] shrink-0">
      <div class="flex flex-1 min-w-0 items-center gap-2">
        <%= if !@current_scope do %>
          <.link navigate={~p"/"} class="btn text-xl text-foreground" data-variant="ghost">

232	232		`min-height: 0;`
233	233		`flex: none;`
234	234		`flex-direction: column;`
235		-	`width: 280px;`
	235	+	`width: 240px;`
236	236		`height: 100%;`
237	237		`overflow: hidden;`
238	238		`border-right: 1px solid var(--line);`

273	273		`position: relative;`
274	274		`display: flex;`
275	275		`align-items: center;`
276		-	`gap: 8px;`
	276	+	`gap: 12px;`
277	277		`/* 32px rows sitting 1px apart. The previous 36px row with 6px of block`
278	278		`padding and 4px between rows spent roughly half the sidebar's height on`
279	279		`space between things rather than on the things. */`

350	350		`pointer-events: none;`
351	351		`}`
352	352
	353	+	`/* Smaller than the row's type and held further from it. A 20px glyph beside`
	354	+	`14px text reads as the larger of the two, which inverts what the row is`
	355	+	`about: the word is the destination and the glyph is a hint. */`
353	356		`.sidebar-row__icon {`
354	357		`display: inline-flex;`
355		-	`width: 20px;`
	358	+	`width: 16px;`
356	359		`flex: none;`
357	360		`justify-content: center;`
358	361		`color: currentColor;`
359		-	`font-size: 1.25rem;`
	362	+	`font-size: 16px;`
360	363		`}`
361	364
362	365		`.sidebar-row__label {`

383	386		`padding-block-end: 6px;`
384	387		`}`
385	388
	389	+	/* Declared here, not in the style pack. `.sidebar-section-label` is unlayered
	390	+	and sets `color`, so the layered `.sidebar-section__summary:hover` could
	391	+	`never win and the heading was the one sidebar row that did not respond to a`
	392	+	`pointer. */`
	393	+	`@media (hover: hover) {`
	394	+	`.sidebar-section-label:hover {`
	395	+	`color: var(--text-primary);`
	396	+	`}`
	397	+	`}`
	398	+
386	399		`.sidebar-section-label {`
387	400		`position: sticky;`
388	401		`z-index: 1;`

2274	2274
2275	2275		`.docs-prose {`
2276	2276		`min-width: 0;`
2277		-	`max-width: 68ch;`
	2277	+	`/* Fills its column. The measure was capped at 68ch, which left a wide`
	2278	+	`screen with a narrow ribbon of text beside a large empty margin; the`
	2279	+	`column itself is what bounds the line now. */`
	2280	+	`max-width: none;`
2278	2281		`flex: 1;`
2279	2282		`color: var(--text-body);`
2280	2283		`}`

2546	2549		`display: flex;`
2547	2550		`align-items: center;`
2548	2551		`justify-content: flex-start;`
2549		-	`gap: 8px;`
	2552	+	`gap: 12px;`
2550	2553		`min-height: 32px;`
2551	2554		`margin-inline: 12px;`
2552	2555		`padding-inline: 8px;`

3265	3268		`@layer components {`
3266	3269		`.landing-section {`
3267	3270		`position: relative;`
	3271	+	`/* Glows are scaled well past their own box -- 2.5x on the wash -- and a`
	3272	+	`scaled element paints outside it. Unclipped, the hero's glow widened the`
	3273	+	`page and left a band of empty scroll to the right of every section.`
	3274	+	`clip` rather than `hidden`: it does not make the section a scroll
	3275	+	`container, so sticky and anchor behaviour inside it are unaffected. */`
	3276	+	`overflow-x: clip;`
3268	3277		`border-bottom: 1px solid var(--line-faint);`
3269	3278		`padding: 64px 24px;`
3270	3279		`}`

4103	4112		`min-height: 0;`
4104	4113		`flex: 1;`
4105	4114		`overflow-y: auto;`
	4115	+	`/* The scroll container is the last place horizontal overflow can surface,`
	4116	+	`so it refuses it outright: a decorative element must never be able to`
	4117	+	`give the page a horizontal scrollbar. */`
	4118	+	`overflow-x: hidden;`
4106	4119		`overscroll-behavior: none;`
4107	4120		`}`
4108	4121

108	108
109	109		`defp openagents_command_bar(assigns) do`
110	110		`~H"""`
111		-	`<header class="flex items-center gap-2 bg-background border-b border-border px-4 h-16 shrink-0">`
	111	+	`<header class="flex items-center gap-2 bg-background border-b border-border px-4 h-[52px] shrink-0">`
112	112		`<div class="flex flex-1 min-w-0 items-center gap-2">`
113	113		`<%= if !@current_scope do %>`
114	114		`<.link navigate={~p"/"} class="btn text-xl text-foreground" data-variant="ghost">`