fix: account profile page responsive behavior in lower size screen

[ashbunnn]

Proposed changes (including videos or screenshots)

Before :

After :

Issue(s)

#35349

Steps to test or reproduce

Open rocket.chat profile page via mobile browser

Further comments

---

This pull request addresses the responsive behavior of the account profile page in the Rocket.Chat repository. The changes focus on improving the layout for smaller screens. Specifically, the AccountProfileForm.tsx file has been refactored to adjust the layout of the email field and the 'Resend verification email' button using the useBreakpoints hook. This allows the flexDirection to switch between row and column based on the screen size, enhancing the form's responsiveness. Additionally, flexbox properties with a gap are used for better spacing. In the AccountProfilePage.tsx file, responsive design improvements are made by introducing breakpoint detection and grouping buttons vertically on mobile devices. These changes aim to enhance the user experience on lower size screens.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

🦋 Changeset detected

Latest commit: 2c60617

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[CLAassistant]

All committers have signed the CLA.

[codecov]

Codecov Report

Attention: Patch coverage is 45.45455% with 6 lines in your changes missing coverage. Please review.

Project coverage is 60.38%. Comparing base (26461ca) to head (ce4d7a6).

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #35348      +/-   ##
===========================================
- Coverage    61.26%   60.38%   -0.89%     
===========================================
  Files         3164     2927     -237     
  Lines        74757    70334    -4423     
  Branches     16689    16157     -532     
===========================================
- Hits         45801    42468    -3333     
+ Misses       25850    24974     -876     
+ Partials      3106     2892     -214     

Flag	Coverage Δ
e2e	56.15% <45.45%> (-1.87%)	⬇️
e2e-api	35.61% <ø> (-5.52%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[kody-ai]

Kody Review Complete

Great news! 🎉
No issues were found that match your current review configurations.

Keep up the excellent work! 🚀

Kody Guide: Usage and Configuration

Interacting with Kody

• Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.

• Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

​