fix(app): truncate long environment title so action icons stay access…

[pooja-bruno]

Description

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.

Publishing to New Package Managers

Please see here for more information.

Summary by CodeRabbit

Summary by CodeRabbit

• Style
  • Improved truncation behavior for long environment titles (ellipsis and no wrapping) to keep headers readable.
  • Updated header layout so title/actions don’t shrink unexpectedly, reducing alignment/layout shifts during rename mode.
• Tests
  • Added Playwright coverage to verify truncated titles render correctly and that environment action buttons remain visible, in-viewport, and usable (including delete modal open/close).

[coderabbitai]

Walkthrough

Fixes environment header title truncation in two parallel EnvironmentDetails components by adding ellipsis/flex layout rules to both StyledWrapper files, inserting data-testid attributes on action buttons, and adding a Playwright test suite that validates long titles truncate correctly and action buttons remain accessible.

Changes

Environment Header Title Truncation & Flex Layout Fixes

Layer / File(s)	Summary
StyledWrapper truncation and flex layout packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/StyledWrapper.js, packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/StyledWrapper.js	Both styled wrappers gain .title overflow/ellipsis/nowrap rules, min-width: 0 on .title-container and its direct > .flex child, and flex-shrink: 0 on the .actions container to prevent layout collapse.
Component markup with test IDs and spacing packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js, packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js	Both EnvironmentDetails components add mr-6 margin to the title wrapper and introduce data-testid attributes on search, rename, copy, and delete action buttons.
Test locators and helper functions tests/utils/page/locators.ts, tests/environments/title-truncation/env-title-truncation.spec.ts (helper)	Extended environment locators with detailsTitle and detailsAction function, plus helper function that validates title clipping (scrollWidth > clientWidth) and confirms action button visibility within viewport bounds.
Title truncation test cases tests/environments/title-truncation/env-title-truncation.spec.ts	Playwright suite with collection-scoped and global-scoped test cases that verify environment titles with very long names truncate visually and that action buttons remain visible and operable.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

size/S

Suggested reviewers

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

Poem

Long env names used to spill and overflow,
Now ellipsis trims the excess with a pro's finesse show.
min-width: 0 keeps the flex from breaking apart,
Tests confirm the truncation—each action still plays its part. 🎯
Two components fixed, and proof to go!

🚥 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 accurately summarizes the main change: fixing truncation of long environment titles to keep action icons accessible.
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.

_{✏️ 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)

tests/environments/title-truncation/env-title-truncation.spec.ts (1)

40-41: ⚡ Quick win

Avoid confirming destructive delete in an accessibility-focused helper.

Clicking Delete here couples this test to the deletion flow/network path. For this scenario, opening the modal already proves the action is operable; close/cancel keeps the test narrower and less flaky.

As per coding guidelines, “E2E tests must verify user-visible behaviour” and should avoid brittle dependencies unrelated to the behavior under test.

Proposed minimal change

-  await locators.modal.button('Delete').click();
-  await expect(locators.modal.byTitle('Delete Environment')).toBeHidden();
+  await locators.modal.closeButton().click();
+  await expect(locators.modal.byTitle('Delete Environment')).toBeHidden();

🤖 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 `@tests/environments/title-truncation/env-title-truncation.spec.ts` around
lines 40 - 41, The test currently clicks the Delete button which creates a
brittle dependency on the actual deletion flow and network interactions, making
it flaky. Replace the locators.modal.button('Delete').click() call with a click
on the modal's close or cancel button instead (such as a close icon or 'Cancel'
button), and keep the expect statement to verify the modal is hidden after that
action. This will prove the modal is operable while keeping the test focused and
narrower without coupling to deletion-related dependencies.

Source: Coding guidelines

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

Nitpick comments:
In `@tests/environments/title-truncation/env-title-truncation.spec.ts`:
- Around line 40-41: The test currently clicks the Delete button which creates a
brittle dependency on the actual deletion flow and network interactions, making
it flaky. Replace the locators.modal.button('Delete').click() call with a click
on the modal's close or cancel button instead (such as a close icon or 'Cancel'
button), and keep the expect statement to verify the modal is hidden after that
action. This will prove the modal is operable while keeping the test focused and
narrower without coupling to deletion-related dependencies.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: fdc68d32-e44a-4664-b404-2f14652d14a1

📥 Commits

Reviewing files that changed from the base of the PR and between f1cb25f and 489cac9.

📒 Files selected for processing (4)

• packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
• packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js
• tests/environments/title-truncation/env-title-truncation.spec.ts
• tests/utils/page/locators.ts

✅ Files skipped from review due to trivial changes (2)

• packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js
• packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js