Fix docs sidebar guide alignment

[Alek99]

Summary

Fixes the docs sidebar guide line so the active item marker aligns cleanly with the continuous guide.

The sidebar previously mixed per-row 1.5px borders with an inset-shadow guide. That could render as visible gaps or a slight horizontal offset at some zoom/device-pixel-ratio combinations. This change renders the nested guide as one continuous w-px line and overlays the active purple marker directly on the same x-position, extending it slightly through the row gap.

Validation

• uv run --python 3.13 ruff format --check docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py
• uv run --python 3.13 ruff check docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py
• uv run --python 3.13 python -m py_compile docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py
• uv run --python 3.13 pytest tests/test_routes.py from docs/app

Also checked the docs page locally at http://localhost:3000/docs/getting-started/introduction/ and verified the purple marker and gray guide share the same pixel column.

[codspeed-hq]

Merging this PR will not alter performance

✅ 9 untouched benchmarks

---

_{Comparing codex/fix-docs-sidebar-guide (3acb427) with main (0f46c0e)}

[greptile-apps]

Greptile Summary

This PR replaces per-row border-l-[1.5px] borders on sidebar leaf items with a single continuous w-px guide line and an absolutely-positioned active marker (sidebar_leaf_guide), fixing alignment gaps that could appear at certain device-pixel-ratio or zoom combinations. The approach is clean and the geometry is consistent: the gray guide is placed at left-[3rem]/left-[2.5rem] from the ul, and the purple active marker is absolute left-0 inside a rx.flex with ml-[3rem]/ml-[2.5rem], landing at the same x-position.

Confidence Score: 5/5

This PR is safe to merge — it is a purely visual CSS change with no logic or data-path modifications.

The change is scoped to Tailwind class strings in the sidebar template. The alignment geometry is internally consistent (guide at left-[3rem] matches flex with ml-[3rem]). The li has !overflow-visible so the -top-1/-bottom-1 bleed of the active marker works correctly. No reactive state, routes, or data handling is touched.

No files require special attention.

Important Files Changed

Filename	Overview
docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py	Sidebar visual refactor: replaces per-row border-based guide with a continuous w-px line and an absolutely-positioned active marker; alignment geometry is correct and overflow handling is in place.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[sidebar_item_comp] --> B{has children?}
    B -- No --> C[sidebar_leaf]
    B -- Yes --> D[details/summary + ul]
    D --> E[li: continuous gray guide\nw-px bg-m-slate-4\nabsolute left-3rem / left-2.5rem]
    D --> F[recursive sidebar_item_comp children]

    C --> G{is_active?}
    G -- Yes --> H[rx.link: relative, no margin\n+ active_background div\n+ rx.flex: relative ml-3rem]
    H --> I[sidebar_leaf_guide\nabsolute left-0 w-px bg-primary-10\ncovers gray guide with purple]
    H --> J[rx.text: pl-4]
    G -- No --> K[rx.link: ml-3rem\n+ rx.flex: relative pl-4]
    K --> L[rx.fragment - nothing rendered]
    K --> M[rx.text: no extra pl]

Loading

_{Reviews (1): Last reviewed commit: "fix docs sidebar guide alignment" | Re-trigger Greptile}