ENG-10920: Add AI Builder CTA to the docs TOC sidebar

[carlosabadia]

[linear-code]

ENG-10920

[codspeed-hq]

Merging this PR will not alter performance

✅ 26 untouched benchmarks
⏩ 8 skipped benchmarks¹

---

_{Comparing carlos/cta-card-in-docs (0734e33) with main (7ba00b4)}

Footnotes

1. 8 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[greptile-apps]

Greptile Summary

This PR adds an AI Builder call-to-action to the docs table-of-contents sidebar and restructures the sidebar into a viewport-capped flex layout.

• Adds a themed Builder card linking to Reflex Build.
• Makes the TOC list consume and scroll within the remaining sidebar height.
• Adjusts the sidebar height according to hosting-banner visibility.

Confidence Score: 4/5

The PR appears safe to merge, although the sidebar should retain a scroll fallback so its TOC remains usable on short, wide viewports.

The new fixed-height CTA shares a viewport-capped container with the TOC, and only the TOC itself can scroll, allowing its available height to collapse under constrained viewport heights.

Files Needing Attention: packages/reflex-site-shared/src/reflex_site_shared/components/docs_shell.py

Important Files Changed

Filename	Overview
packages/reflex-site-shared/src/reflex_site_shared/components/docs_shell.py	Adds the Builder CTA and flex-based sidebar sizing, with a short-viewport edge case that can collapse the TOC navigation area.

_{Reviews (1): Last reviewed commit: "ENG-10920: Add AI Builder CTA to the doc..." | Re-trigger Greptile}

[greptile-apps]

TOC loses available height

On short 2xl-or-wider viewports, the fixed Builder card, feedback control, headings, gaps, and padding consume the viewport-capped container while only the TOC list can shrink and scroll. This can reduce the list to zero or nearly zero height, making the page navigation unusable; retain a scrolling fallback for the complete sidebar or reserve a minimum usable height for the TOC.

[cubic-dev-ai]

2 issues found across 1 file

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/reflex-site-shared/src/reflex_site_shared/components/docs_shell.py">

<violation number="1" location="packages/reflex-site-shared/src/reflex_site_shared/components/docs_shell.py:510">
P3: The new Builder card uses `-ml-2` with `w-[calc(100%+1rem)]` while this change also removed `overflow-y-auto` from the sticky sidebar container without adding `overflow-hidden`. The card therefore extends ~0.5rem beyond both edges of the 240px sidebar column and will visibly bleed over the main content area to its right (and slightly off the left edge). If the pop-out look is intended, you may want to keep it contained (e.g. scope the bleed to the left only, or add a matching padding/overflow guard); otherwise the card can overlap the adjacent page content on the right. Worth confirming against the rendered 2xl layout.</violation>

<violation number="2" location="packages/reflex-site-shared/src/reflex_site_shared/components/docs_shell.py:571">
P2: The right sidebar can make the new Builder card/feedback area unreachable on shorter viewports because the sticky container no longer scrolls while only the TOC list does. Keeping vertical overflow on the sticky wrapper preserves access to all sidebar content.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic</sub>

[cubic-dev-ai]

P2: The right sidebar can make the new Builder card/feedback area unreachable on shorter viewports because the sticky container no longer scrolls while only the TOC list does. Keeping vertical overflow on the sticky wrapper preserves access to all sidebar content.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/reflex-site-shared/src/reflex_site_shared/components/docs_shell.py, line 571:

<comment>The right sidebar can make the new Builder card/feedback area unreachable on shorter viewports because the sticky container no longer scrolls while only the TOC list does. Keeping vertical overflow on the sticky wrapper preserves access to all sidebar content.</comment>

<file context>
@@ -492,33 +537,48 @@ def docs_right_sidebar(
-                    class_name="mt-1.5 flex flex-col justify-start",
+                _docs_builder_card(),
+                class_name=ui.cn(
+                    "sticky top-4 flex min-h-0 flex-col justify-start gap-y-4 pb-4",
+                    (
+                        rx.cond(
</file context>

Suggested change

	"sticky top-4 flex min-h-0 flex-col justify-start gap-y-4 pb-4",
	"sticky top-4 flex min-h-0 flex-col justify-start gap-y-4 overflow-y-auto pb-4",

[cubic-dev-ai]

P3: The new Builder card uses -ml-2 with w-[calc(100%+1rem)] while this change also removed overflow-y-auto from the sticky sidebar container without adding overflow-hidden. The card therefore extends ~0.5rem beyond both edges of the 240px sidebar column and will visibly bleed over the main content area to its right (and slightly off the left edge). If the pop-out look is intended, you may want to keep it contained (e.g. scope the bleed to the left only, or add a matching padding/overflow guard); otherwise the card can overlap the adjacent page content on the right. Worth confirming against the rendered 2xl layout.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/reflex-site-shared/src/reflex_site_shared/components/docs_shell.py, line 510:

<comment>The new Builder card uses `-ml-2` with `w-[calc(100%+1rem)]` while this change also removed `overflow-y-auto` from the sticky sidebar container without adding `overflow-hidden`. The card therefore extends ~0.5rem beyond both edges of the 240px sidebar column and will visibly bleed over the main content area to its right (and slightly off the left edge). If the pop-out look is intended, you may want to keep it contained (e.g. scope the bleed to the left only, or add a matching padding/overflow guard); otherwise the card can overlap the adjacent page content on the right. Worth confirming against the rendered 2xl layout.</comment>

<file context>
@@ -466,6 +468,49 @@ def docs_feedback_button_toc() -> rx.Component:
+        target="_blank",
+        rel="noopener noreferrer",
+        aria_label="Open Reflex AI Builder",
+        class_name="relative isolate -ml-2 flex w-[calc(100%+1rem)] shrink-0 touch-manipulation cursor-pointer flex-col items-start justify-start gap-2 rounded-xl border border-secondary-a4 bg-white-1 p-6 shadow-small transition-colors hover:border-secondary-a6 hover:bg-secondary-2 focus-visible:border-secondary-a6 focus-visible:bg-secondary-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary-8",
+    )
+
</file context>