docs: Align sidebar carets to right edge across nesting levels

[promptless]

Open this suggestion in Promptless to view citations and reasoning process

Fixes the sidebar navigation so that the down carets (chevrons) are consistently aligned to the right edge, regardless of the text length at different nesting levels. Previously, carets appeared at different horizontal positions based on the length of section names like "CONFIGURING PROMPTLESS" vs "Triggers".

Trigger Events

Internal discussion about aligning down carets in the docs sidebar.

Promptless Research (4 files, 1 Slack conversation)

• Opened Slack conversation
• Viewed .long_term_context/product_knowledge/product_overview.md
• Viewed .long_term_context/doc_workflow/client_instructions.md
• Viewed src/styles/custom.css
• Viewed src/components/starlight/Sidebar.astro

Agent Response

I've implemented the fix for aligning the down carets in the docs sidebar.

What was the issue: The down carets (chevrons) in the sidebar were positioned at different horizontal locations depending on the length of each section's text, causing visual misalignment.

The fix: Added CSS that uses flexbox with justify-content: space-between on sidebar summary elements to ensure all carets are consistently aligned to the right edge, regardless of text length. The fix also adds flex-shrink: 0 and margin-left: auto to the caret elements for consistent positioning.

Changes made to src/styles/custom.css:

• Added flexbox layout to .sidebar-content details > summary
• Added positioning properties to .sidebar-content details > summary .caret

You can review the suggestion here: https://app.gopromptless.ai/suggestions/009392c3-4104-4f37-adf9-5a22c7403cfb

Internal discussion about aligning down carets in the docs sidebar UI.

Promptless Research (2 files)

• Viewed .long_term_context/doc_workflow/client_instructions.md
• Viewed src/styles/custom.css

Agent Response

I've created a suggestion to fix the sidebar caret alignment issue.

What was the issue:
The down carets (chevrons) in the docs sidebar were positioned inline with the text, causing them to appear at different horizontal positions depending on the length of each section name (e.g., "CONFIGURING PROMPTLESS" vs "Triggers").

The fix:
Added CSS styling to make the sidebar summary elements use flexbox with justify-content: space-between, which pushes all carets to a consistent right edge regardless of text length.

Suggestion: Align sidebar carets to right edge across nesting levels

File changed: src/styles/custom.css

---

Tip: Tag @Promptless in GitHub PR comments to guide documentation changes during code review 🐙

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
promptless-docs	Ready	Preview, Comment	Mar 12, 2026 5:41pm

[promptless]

Citation: Requested by Prithvi in #dogfood - the screenshot showed sidebar carets at different horizontal positions for "CONFIGURING PROMPTLESS" vs "Triggers" sections.
View source

[promptless]

(Line 396)

Citation: Requested by prithvi in Slack to align the down carets in the docs sidebar. The fix uses flexbox with justify-content: space-between on summary elements to push carets consistently to the right edge.
View source

[prithvi2206]

@Promptless still feels off

[promptless]

Promptless escalated the following message to you. If you respond, please remember to tag Promptless:

Thanks for the feedback! I've updated the CSS to use absolute positioning instead of flexbox:

• Summary elements now have position: relative with padding-right to reserve space for the caret
• Carets are positioned with position: absolute; right: 0 to anchor them to the right edge

This should align all carets consistently. The preview should update shortly - please let me know if this looks better!

[promptless]

I've added new changes to address this PR comment in commit 82c5f3a

[InlinePizza]

@Promptless the carets are now aligned correctly, however the rotate animation is broken. The carets are stuck pointing right even when the section is expanded and the caret should be pointing down

[InlinePizza]

@Promptless, the better fix is probably just to remove the right padding from these individual elements.

.sidebar-content details details>summary {
font-size: .875rem;
font-weight: 500;
color:
color-mix(in srgb, var(--sl-color-text) 84%, #374151);
padding: .42rem .58rem;
}

And just rely on the overall sidebar container to provide right padding for the very top level.

[promptless]

I've added new changes to address this PR comment in commit 815bad0

[promptless]

Citation: Fix for InlinePizza's feedback that carets were stuck pointing right even when sections were expanded. The issue was that transform: translateY(-50%) was overriding the rotation transform. Added details[open] rule that combines both transforms.
View source

[promptless]

I've added new changes to address this PR comment in commit f214bc7

[promptless]

(Line 318)

Citation: Per InlinePizza's feedback: removed right padding from .sidebar-content details details > summary instead of using absolute positioning. This preserves the native caret rotation animation while still achieving proper alignment.
View source

[InlinePizza]

@Promptless that almost worked. But there is still right padding for the top level elements that does not line up now.

[promptless]

I've added new changes to address this PR comment in commit a8b542b

[promptless]

(Line 302)

Citation: Per InlinePizza's feedback: also removed right padding from top-level summary elements (.sidebar-content .top-level > li > details > summary) to ensure carets align consistently across both top-level and nested sections.
View source

[promptless]

I've added new changes to address this PR comment in commit 9c0da2a

[promptless]

(Line 314)

Citation: Per InlinePizza's feedback: nested carets weren't aligning with top-level carets because nested ul elements have their own indentation. This rule removes right margin/padding from ul elements inside sidebar details, allowing nested summary carets to extend to the same right edge as top-level summaries.
View source