Restore the two-line clamp on the role selector

What does this MR do and why?

Follow-up to !256803 (merged), from @rchanila's review there.

ad1b1685ee3b replaced gl-line-clamp-2 with gl-flex gl-items-start gl-justify-between gl-gap-2 on the role data div, so the "New" badge could sit beside the role name.

-      <div class="gl-line-clamp-2" data-testid="role-data">
+      <div class="gl-flex gl-items-start gl-justify-between gl-gap-2" data-testid="role-data">

!256803 (merged) removes the badge, which leaves the role name span as the div's only child. The flex classes then have no effect, and long role names in the dropdown no longer clamp to two lines. This restores the div to exactly what it was before ad1b1685ee3b, matching the pattern still used in app/assets/javascripts/members/components/table/max_role.vue.

Targets the badge MR's branch rather than master, because on master the badge is still present and those flex classes are doing real work. It will retarget to master automatically once that MR merges.

How to set up and validate locally

yarn jest spec/frontend/members/components/role_selector_spec.js

24 tests, 0 failures.

References

!256803 (merged)

#601418 (closed)

Screenshots or screen recordings

No visual change to the badge removal itself. This restores the two-line clamp for long role names in the role dropdown.

🤖 Generated with Claude Code