fix:change-version modal ui

[adwait-bruno]

Description

UI changes for Change Version Modal

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.

Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.
Before:

After:

Publishing to New Package Managers

Please see here for more information.

Summary by CodeRabbit

• Style
  • Improved spacing and alignment in the collection version interface.
  • Refined version rows, current-value display, preview areas, and section headers for a more compact, consistent layout.
  • Standardized input and preview sizing for tighter, cleaner UI spacing.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7c1be907-c00f-4fb4-b7fd-8c2aef87c0fd

📥 Commits

Reviewing files that changed from the base of the PR and between 09d55cd and 0b1c696.

📒 Files selected for processing (1)

• packages/bruno-app/src/components/Sidebar/Collections/Collection/ChangeCollectionVersion/StyledWrapper.js

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/bruno-app/src/components/Sidebar/Collections/Collection/ChangeCollectionVersion/StyledWrapper.js

---

Walkthrough

Collection version styling now uses tighter spacing, explicit flex alignment, full-width sizing, and fixed heights for current-value and new-version input elements.

Changes

Collection version layout

Layer / File(s)	Summary
Tighten spacing and sizing packages/bruno-app/src/components/Sidebar/Collections/Collection/ChangeCollectionVersion/StyledWrapper.js	Reduces spacing in the subheader, version rows, columns, and preview; adds explicit flex alignment and fixed heights for current-value and new-version input elements.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Suggested reviewers: bijin-bruno, helloanoop, lohit-bruno

Poem

Spaces shrink and rows align,
Flex keeps every value fine.
Inputs hold their measured height,
Preview padding feels just right.

🚥 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 matches the main change: UI tweaks to the Change Collection Version modal.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@packages/bruno-app/src/components/Sidebar/Collections/Collection/ChangeCollectionVersion/StyledWrapper.js`:
- Around line 54-58: Update the version container styling in the
ChangeCollectionVersion styled wrapper to use min-height: 28px instead of a
fixed height, allowing long versions wrapped by overflow-wrap: anywhere to
expand vertically without overlapping the preview row.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b688bd01-e8f2-4aa9-8761-606bac29827c

📥 Commits

Reviewing files that changed from the base of the PR and between 4f02e61 and 09d55cd.

📒 Files selected for processing (1)

• packages/bruno-app/src/components/Sidebar/Collections/Collection/ChangeCollectionVersion/StyledWrapper.js

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Allow long current versions to expand vertically.

overflow-wrap: anywhere allows a long existing version to wrap, but the new fixed height: 28px keeps the container at one line. A long value can therefore overflow into the preview row and create visual overlap. Prefer min-height: 28px (or an explicit truncation strategy) so wrapped values remain readable.

Suggested fix

     .current-value {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       width: 100%;
-      height: 28px;
+      min-height: 28px;

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	display:flex;
	align-items:center;
	justify-content:flex-start;
	width: 100%;
	height:28px;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	width: 100%;
	min-height:28px;

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@packages/bruno-app/src/components/Sidebar/Collections/Collection/ChangeCollectionVersion/StyledWrapper.js`
around lines 54 - 58, Update the version container styling in the
ChangeCollectionVersion styled wrapper to use min-height: 28px instead of a
fixed height, allowing long versions wrapped by overflow-wrap: anywhere to
expand vertically without overlapping the preview row.