You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
fix: keep collapsible titles clear of the chevron - #461
On collapsible blocks ([%collapsible], rendered as <details>), a title long enough to reach the right edge runs under the chevron. You can see it in the Check your understanding section of the Agentic Data Plane overview page. Titles of a similar length on other pages look fine only because their line breaks happen to fall just short of the chevron.
Cause, in src/css/doc.css:
.doc details > summary.title is display: flex with no right padding.
.doc details > summary::after (the chevron) is position: absolute; right: 0, so the text flows underneath it.
Because the summary is a flex container, inline code in a title becomes its own flex item, and the words around it stack into columns at narrower widths.
Fix
Lay the summary out as a block (display: block) and reserve padding-right: 2rem for the chevron.
Center the chevron vertically (top: 50%; transform: translateY(-50%)), and keep it centered when it rotates on open (translateY(-50%) rotate(90deg)).
An open block's bottom padding is unaffected. details[open] > summary { padding-bottom: 16px } was already overridden by the more specific .doc details > summary.title { padding-bottom: 0 }, so centering on the summary box centers on the title text in both states.
The same changes are mirrored in src/css/doc-bump.css, whose .aa-DetachedOverlay copy of these rules styles collapsible blocks in the detached search overlay.
This applies to every collapsible block on every site that uses the bundle.
Built adp-docs locally, applied these rules over the built site.css, and took Playwright screenshots of the Check your understanding sections on get-started/adp-overview and control/budgets in light and dark themes, with one block open. Before: the overview titles run under the chevron. After: every title wraps before the chevron, and the chevron is vertically centered on its title, closed and open.
Not tested: a full gulp bundle build, and the search overlay visually. Its rules are identical to the doc.css rules checked in the screenshots described above, and nothing in doc-bump.css adds bottom padding to an open summary.
A collapsible block's summary was a flex container with no right padding,
and the chevron is absolutely positioned at right: 0, so a title long
enough to reach the right edge ran under the chevron. As a flex
container, the summary also turned inline code in a title into a flex
item, splitting the surrounding words into stacked columns.
Lay the summary out as a block, reserve 2rem on the right for the
chevron, and center the chevron vertically in both the closed and open
states.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1 paths audited Performance: 43 (🔴 down 4 from production) Accessibility: 89 (no change from production) Best Practices: 83 (no change from production) SEO: 89 (no change from production) PWA: - View the detailed breakdown and full score reports
Auto incremental reviews are disabled on this repository.
Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.
Run configuration
Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: Organization UI
Review profile: CHILL
Plan: Essentials
Run ID: 5b65168b-34a9-4106-b7e4-75a78480b50e
You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.
Use the checkbox below for a quick retry:
Trigger review
No actionable comments were generated in the recent review.
Walkthrough
The disclosure summary changes from flex layout to block layout and gains right padding. The chevron is vertically centered. In the open state, its rotation combines with the vertical translation.
This change adjusts collapsible title layout so wrapped text stays clear of the chevron and the chevron stays vertically centered. No concrete merge-blocking risk was identified.
Pre-merge checks: 4
Check name
Status
Explanation
Title check
The title "fix: keep collapsible titles clear of the chevron" matches the main change. The diff changes the collapsible summary in src/css/doc.css so titles reserve right padding for the chevron, swit…
Linked Issues check
Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check
Check skipped because no linked issues were found for this pull request.
Description check
The description explains the problem and the fix. It names the affected file, src/css/doc.css, and the changed rules: block layout, 2rem right padding for the chevron, and vertical centering of the ch…
Full details: Title check
Explanation
The title "fix: keep collapsible titles clear of the chevron" matches the main change. The diff changes the collapsible summary in src/css/doc.css so titles reserve right padding for the chevron, switch from flex to block layout, and keep the chevron vertically centered in both closed and open states. The title is specific and concise, and it names the affected element and the problem being fixed.
Full details: Description check
Explanation
The description explains the problem and the fix. It names the affected file, src/css/doc.css, and the changed rules: block layout, 2rem right padding for the chevron, and vertical centering of the chevron in closed and open states. It also lists the mirrored change in src/css/doc-bump.css, the verification steps, and what was not tested. This matches the changeset summary and the PR objectives.
Finishing Touches
Generate unit tests (beta)
Commit to this branch
Create a new PR
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Recent review info
Run configuration
Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: Organization UI
Review profile: CHILL
Plan: Essentials
Run ID: df4cbbeb-16dd-48f9-92ee-6cefc94e99f6
Commits
Reviewing files that changed from the base of the PR and between 44ae444 and 78397da.
Files selected for processing: 1
src/css/doc.css
Included review availability: This review used your included allowance. 4 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour.
doc-bump.css mirrors the doc.css collapsible rules for the detached
search overlay, so it still had the flex layout that lets a wrapped
title run under the chevron. Apply the same block layout, right padding,
and vertically centered chevron there. Also reword the doc.css comment
to state the current reason rather than past behavior.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The open-state chevron rules set border-color and border-width, but the
chevron is a background image with no border-style, so neither rendered.
The doc.css comment now points to the doc-bump.css copy.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Mirror note: The doc.css comment now says the rules are mirrored in doc-bump.css (.aa-DetachedOverlay) for the detached search overlay, so the next edit updates both copies.
Unused border rules: Removed border-color and border-width from the open-state chevron rule in doc.css and in its doc-bump.css mirror. The chevron is a background image with no border-style, so neither declaration rendered. Each rule now holds only the rotation. No visual change.
Re-review of the changes since 8239666 (review by @Feediver1). Earlier merge-blockers stay listed until the review that raised them reports them fixed.
✅ Best-fit review (code-review (CSS)): no merge-blockers
Review of PR 461 — incremental re-review
PR 461 keeps collapsible-block (<details>) titles clear of the chevron in src/css/doc.css and its .aa-DetachedOverlay mirror in src/css/doc-bump.css; the changes since commit 8239666 only drop two inert border declarations from the open-state chevron rule and add a cross-reference comment, so I reviewed them as code (CSS correctness) — none of the docs-team-standards review skills (skill-authoring, ux-text, embedded-reference-strings, antora-conventions, Markdown) covers stylesheet source.
Merge-blockers
None.
The two removed declarations were dead. The chevron is drawn as a background image (background: url(../img/nav-tree-chevron.svg) ... at src/css/doc.css:1619, src/css/doc-bump.css:708), not as a CSS border triangle, and neither ::after base rule nor anything else in src/css/ sets border-style on a details > summary::after (only .navbar-link::after in header.css/header-bump.css uses border-style). With border-style at its initial none, the computed border width is 0, so border-color: currentColor transparent transparent and border-width: 0.5rem 0.3rem 0 had no paint or layout effect in either file. Removing them leaves .doc details[open] > summary::after and .aa-DetachedOverlay .doc details[open] > summary::after with just transform: translateY(-50%) rotate(90deg), which still both rotates the open-state chevron and preserves the vertical centering from the base rule — the behavior the PR sets out to deliver.
The only other consumer of these rules, src/css/bloblang-playground.css:547 and :642, hides summary::after outright, so it cannot regress from the removal.
Suggestions
src/css/doc.css:1592 — the new "Mirrored in doc-bump.css (.aa-DetachedOverlay) for the detached search overlay" note sits on .doc details > summary.title, but the mirror also covers the ::after and [open] > summary::after rules at lines 1617-1630. Consider wording it to cover the whole chevron/summary group (for example "These summary and chevron rules are mirrored...") so a future edit to the ::after rules is just as likely to pick up the hint. src/css/doc-bump.css:685 has the matching reciprocal note, which is the useful half of the pair either way.
What works well
The cleanup is the right kind: it removes declarations that the switch to a background-image chevron made meaningless, rather than leaving them as a misleading hint that the arrow is border-drawn.
Both copies of the rule were changed in lockstep, and the added comments make the doc.css ↔ doc-bump.css duplication discoverable in both directions, which is the practical failure mode for this file pair.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Feediver1
left a comment
Problem
On collapsible blocks (
[%collapsible], rendered as<details>), a title long enough to reach the right edge runs under the chevron. You can see it in the Check your understanding section of the Agentic Data Plane overview page. Titles of a similar length on other pages look fine only because their line breaks happen to fall just short of the chevron.Cause, in
src/css/doc.css:.doc details > summary.titleisdisplay: flexwith no right padding..doc details > summary::after(the chevron) isposition: absolute; right: 0, so the text flows underneath it.Fix
display: block) and reservepadding-right: 2remfor the chevron.top: 50%; transform: translateY(-50%)), and keep it centered when it rotates on open (translateY(-50%) rotate(90deg)).An open block's bottom padding is unaffected.
details[open] > summary { padding-bottom: 16px }was already overridden by the more specific.doc details > summary.title { padding-bottom: 0 }, so centering on the summary box centers on the title text in both states.The same changes are mirrored in
src/css/doc-bump.css, whose.aa-DetachedOverlaycopy of these rules styles collapsible blocks in the detached search overlay.This applies to every collapsible block on every site that uses the bundle.
Verification
stylelint src/css/doc.css src/css/doc-bump.csspasses.site.css, and took Playwright screenshots of the Check your understanding sections onget-started/adp-overviewandcontrol/budgetsin light and dark themes, with one block open. Before: the overview titles run under the chevron. After: every title wraps before the chevron, and the chevron is vertically centered on its title, closed and open.gulp bundlebuild, and the search overlay visually. Its rules are identical to thedoc.cssrules checked in the screenshots described above, and nothing indoc-bump.cssadds bottom padding to an open summary.🤖 Generated with Claude Code