fix: align sidebar requests with and without examples

[ahamSel]

Description

I fixed the sidebar alignment for requests with and without examples. The method labels and request names now start at the same position for requests at the same level.

I used AI to help with the fix and regression test.

Problem

Fixes #9186.

Requests without examples didn't reserve space for the chevron, so their method labels and names started 16 pixels to the left of requests with examples.

Fix

I added an empty 16-pixel slot when a row has no chevron, using the same spacing pattern as the existing example rows. The slot isn't a button, and expanding or collapsing examples still works as before.

I also added an Electron regression test that compares the rendered method and name positions with examples collapsed and expanded. It uses an isolated app and a temporary copy of the existing collection fixture.

Testing

• The regression test failed with a 16-pixel difference before the fix and passed twice after it.
• All 2,109 frontend unit tests passed with TZ=UTC. Two existing date-format tests depend on the local timezone.
• Scoped lint passed with no errors; existing warnings on unchanged lines remain.
• I checked alignment, example expansion, nested requests, and resizing manually in the local desktop build.

Screenshots

Before, from the issue report:

After, from the local build:

Contribution Checklist:

• I've used AI significantly to create this pull request
• The pull request only addresses one issue or adds one feature.
• The pull request does not introduce any breaking changes
• I have added screenshots or gifs to help explain the change if applicable.
• I have read the contribution guidelines.
• Create an issue and link to the pull request.
• I've run the claude code review skill locally.

Summary by CodeRabbit

• Bug Fixes

  • Improved sidebar alignment for collection items with and without response examples.
  • Kept request method and name columns consistently aligned when examples are collapsed or expanded.

• Tests

  • Added automated coverage to verify sidebar alignment across different request configurations.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: eaa68a52-e244-4c71-81db-6a91d2a0f0cf

📥 Commits

Reviewing files that changed from the base of the PR and between 20d6b55 and fbb2726.

📒 Files selected for processing (4)

• packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/index.js
• packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
• tests/response-examples/sidebar-alignment.spec.ts
• tests/utils/page/sidebar/index.ts

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

Walkthrough

The sidebar now reserves chevron space for request rows without examples. A request-method test locator and Playwright coverage verify method and name alignment in collapsed and expanded states.

Changes

Sidebar alignment

Layer / File(s)	Summary
Reserve request row spacing packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/...	Items without a chevron now render a fixed-width spacer. The request method element now exposes a test ID.
Validate sidebar alignment tests/utils/page/sidebar/index.ts, tests/response-examples/sidebar-alignment.spec.ts	Sidebar locators include request methods. Playwright tests compare method and name positions for requests with and without examples.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to fbb27

Requests without examples now reserve the chevron column so sidebar method labels and names align with requests that have examples. The change is covered for collapsed and expanded example states and is ready to merge.

Poem

A chevron’s space now stays in line
Methods march in columns fine
Examples open, examples close
Each request keeps its proper pose
The sidebar rests in neat repose

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the primary change: aligning sidebar requests with and without examples.
Linked Issues check	✅ Passed	The changes satisfy issue #9186 by reserving a 16-pixel chevron slot for rows without examples. The new Electron regression test verifies alignment in collapsed and expanded states.
Out of Scope Changes check	✅ Passed	All changes support the alignment fix or its regression coverage. The test ID and locator changes are required by the new test and are not out of scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 4…

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}