fix: add flex-wrap to fix overflow

[scarlachs]

What does this PR do?

• Fixes Multiple Email addresses overflow parent #19583 (GitHub issue number)

Visual Demo (For contributors especially)

A visual demonstration is strongly recommended, for both the original and new change (video / image - any one).

Video Demo (if applicable):

• Show screen recordings of the issue or feature.
• Demonstrate how to reproduce the issue, the behavior before and after the change.

Image Demo (if applicable):

• Add side-by-side screenshots of the original and updated change.
• Highlight any significant change(s).

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

• Are there environment variables that should be set? no
• What are the minimal test data to have? user login
• What is expected (happy path) to have (input and output)? profile settings, multiple emails on multiple rows
• Any other important info that could help to test that PR

Checklist

[vercel]

@scarlachs is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

No release type found in pull request title "add flex-wrap to fix overflow". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

[graphite-app]

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (02/26/25)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add community label" took an action on this PR • (02/26/25)

1 label was added to this PR based on Keith Williams's automation.

"Add ready-for-e2e label" took an action on this PR • (02/27/25)

1 label was added to this PR based on Keith Williams's automation.

[retrogtx]

thanks for noticing this and making a PR!

[github-actions]

E2E results are ready!

• Workflow #49358.1 latest results

[anikdhabal]

Now:-

We need 2x per row here. Could pls made a follow-up pr @retrogtx @scarlachs

[scarlachs]

@anikdhabal @retrogtx
A

B

which one do you prefer, A or B? 2x mails per row with button or 2x mails per row and button on new row?

[retrogtx]

@anikdhabal @retrogtx A

B

which one do you prefer, A or B? 2x mails per row with button or 2x mails per row and button on new row?

thank you very much for this, but a relevant PR has been merged 🙏

edit: went with B btw.