ADM-992 [frontend]: change the style when device is mobile

[zhou-yinyuan]

Summary

...

Before

Description

Screenshots
If applicable, add screenshots to help explain behavior of your code.

After

Description

Screenshots
If applicable, add screenshots to help explain behavior of your code.

Note

Null

[github-actions]

Hi @zhou-yinyuan! 👋
Thank you for submitting a pull request! We appreciate your contribution and will review your changes as soon as possible.

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ +0.00%	✅ ∅

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (fa7a8e1)	8628	8628	100.00%
Head commit (4001c71)	17256 (+8628)	17256 (+8628)	100.00% (+0.00%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#1574)	0	0	∅ (not applicable)

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}

[sonarqubecloud]

Quality Gate passed for 'heartbeat-backend'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[sonarqubecloud]

Quality Gate passed for 'au-heartbeat-heartbeat-frontend'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud