feat(content-sidebar): add drag-to-resize handle [spike]

[jmcbgaston]

Description

Adds a drag-to-resize handle on the left edge of ContentSidebar. Users can grow the sidebar from the current default width (the existing 340px content / 380px wider variant, plus the 60px tabs rail) up to 60% of the viewport. Existing flex reflow on .bcpr-content causes ContentPreview.onResize to fire automatically, which already calls preview.resize() — so the preview viewer reflows without any new wiring.

New SidebarResizeHandle is a role="separator" widget with:

• Pointer drag (pointerdown → window pointermove/pointerup, with setPointerCapture)
• Keyboard resize: ArrowLeft / ArrowRight (16px step), Home / End (jump to min / max)
• Live aria-valuenow / aria-valuemin / aria-valuemax

State is session-only — no persistence across reloads.

Spike caveat: the resize feature is gated behind a mocked const isResizable = true in Sidebar.js. Before merging, swap this for a real feature flag check (there is a TODO comment marking the spot).

Known gaps (out of scope for this draft)

• Not yet disabled below the mobile breakpoint ($medium-screen) — the mobile layout collapses the sidebar to a top strip, where the drag handle shouldn't render.
• No persistence (LocalStore / user preferences).
• No tests — this is a spike.

Test plan

• Open any file preview. Hover the left edge of the sidebar — cursor should become col-resize and the edge should highlight.
• Drag the left edge leftward — sidebar grows, preview area shrinks, viewer (PDF / image / video) reflows.
• Release drag — sidebar stays at the new width.
• Reload — sidebar returns to default width (session-only, expected).
• Tab to the handle — visible focus ring, ArrowLeft / ArrowRight resize by 16px, Home / End jump to min / max.
• With a screen reader: handle announces as "Resize sidebar, separator" with live value.
• Box AI sidebar variant (.bcs-is-wider) — default width is 440px, min is 440px, drag still works.

Semantic release type

• feat - New feature

[coderabbitai]

Important

Review skipped

Draft detected.

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

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a281e002-eb1c-464d-8a6b-eefcb6212701

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch spike-resizable-sidebar

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}