fix: fix ui overflow on phone for calendar settings

[mhetreayush]

What does this PR do?

This PR fixes a UI bug in the calendar settings page on mobile which leads to the overflow of the Adding events to label. Check the screenshots below for a clear understaning.

• Fixes UI Bug: Adding events to - label in the setting/calendar page is overflowing in mobile view #16652
• Fixes CAL-XXXX (Linear issue number - should be visible at the bottom of the GitHub issue description)

Before fix screenshots:

• Desktop:

• Mobile:

After fix screenshots:

• Desktop:

• Mobile:

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have added a Docs issue here 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?
• What are the minimal test data to have?
• What is expected (happy path) to have (input and output)?
• Any other important info that could help to test that PR

Checklist

[vercel]

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

A member of the Team first needs to authorize it.

[graphite-app]

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (09/16/24)

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

"Add community label" took an action on this PR • (09/16/24)

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

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

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

[Amit91848]

Thanks for the pr @mhetreayus. This works but it does not look that good. We want to maintain the same layout, can you have the email go to the next line

[mhetreayush]

@Amit91848

can you have the email go to the next line

By this, do you mean label should be above the email? or do you mean I should wrap the email such that it breaks into parts

Attaching a screenshot:

[Amit91848]

No 'Adding events to' should be right next to the email like it is originally. Just make the email go to next line

[mhetreayush]

I guess this is what you are asking for @Amit91848 (I have hardcoded the value in the codebase to check for overflow issues)

[Amit91848]

Let me just confirm the layout and get back to you @mhetreayush

[mhetreayush]

@Amit91848 Any updates here?

[Amit91848]

Hey @mhetreayush , you can revert it back to "Adding events to" text below the email. Sorry for the extra work you had to do 🙏

• Mobile:

[mhetreayush]

No worries @Amit91848 , I reverted to the first commit (20cc4cb) .

[mhetreayush]

@Amit91848 Any updates here?

[Amit91848]

Gap between Adding Events To and gmail should be reduced, keep it the same as it is currently. Otherwise changes look good 👍
Your changes:

Current:

[github-actions]

E2E results are ready!

• Workflow #33492.1 latest results