fix: no environment alignment

[pooja-bruno]

Description

JIRA

Fix no environment alignment in environment selector

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.

Summary by CodeRabbit

• Bug Fixes

  • Fixed "No Environment" option to properly display active state in the environment selector.

• Style

  • Updated visual styling of "No Environment" label for improved clarity and visual hierarchy.

[coderabbitai]

Important

Review skipped

Auto reviews are limited based on label configuration.

🏷️ Required labels (at least one) (1)

• ai-enhance

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: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 1b3a2c2a-3a06-47fc-9917-061773b2fb42

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

Walkthrough

Updated the "No Environment" dropdown item to conditionally apply the dropdown-item-active class when no environment is selected. Restructured the label rendering to include visual spacing and applied italic styling with reduced opacity for improved visual distinction.

Changes

Cohort / File(s)	Summary
Environment Selector UI Update packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js	Added conditional dropdown-item-active class binding and restructured "No Environment" label layout with icon spacing and italic opacity styling.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Suggested reviewers

• helloanoop
• lohit-bruno
• naman-bruno
• bijin-bruno

Poem

🌍 A dropdown refined with grace,
No Environment finds its place,
With spacing and italic flair,
The UI breathes fresher air! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: no environment alignment' directly relates to the main change: fixing the visual alignment of the 'No Environment' dropdown item through CSS class updates and label layout adjustments.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js (1)

20-26: Logic and alignment fix looks correct.

The conditional dropdown-item-active class correctly uses the falsy check against activeEnvironmentUid, which aligns with the Redux slice setting it to null when no environment is selected. The spacing span maintains visual alignment with ColorBadge in other environment items.

One minor note: per coding guidelines, italic and opacity-50 are visual styles rather than layout. These would typically belong in styled components. Consider moving them to the existing styled wrapper if consistency is a concern, but this is a low-priority nitpick given the small scope.

,

♻️ Optional: Move visual styles to styled component

-              <span className="italic opacity-50">No Environment</span>
+              <span className="no-environment-label">No Environment</span>

Then in the styled component wrapper, add:

.no-environment-label {
  font-style: italic;
  opacity: 0.5;
}

As per coding guidelines: "Tailwind classes are used specifically for layout-based styles" and "Styled Component CSS might also change layout but Tailwind classes shouldn't define colors."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js`
around lines 20 - 26, The current JSX uses Tailwind utility classes "italic" and
"opacity-50" inline on the span for the "No Environment" label; move these
visual styles into the styled wrapper to follow the guideline that Tailwind be
used for layout only. Update the EnvironmentListContent styled component (the
wrapper that renders the .no-environment item) to add a class or rule (e.g.,
.no-environment-label) with font-style: italic and opacity: 0.5 and replace the
inline "italic opacity-50" on the span in the element that reads "No
Environment" (the div using activeEnvironmentUid and onEnvironmentSelect(null))
to use that class instead.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js`:
- Around line 20-26: The current JSX uses Tailwind utility classes "italic" and
"opacity-50" inline on the span for the "No Environment" label; move these
visual styles into the styled wrapper to follow the guideline that Tailwind be
used for layout only. Update the EnvironmentListContent styled component (the
wrapper that renders the .no-environment item) to add a class or rule (e.g.,
.no-environment-label) with font-style: italic and opacity: 0.5 and replace the
inline "italic opacity-50" on the span in the element that reads "No
Environment" (the div using activeEnvironmentUid and onEnvironmentSelect(null))
to use that class instead.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ddfbabd9-fb07-4b3b-9b8f-1fdfe473c303

📥 Commits

Reviewing files that changed from the base of the PR and between 9944819 and 2064601.

📒 Files selected for processing (1)

• packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js

[sid-bruno]

Approved, waiting on JIRA for new release version tag