Fixed an issue where the gear button could not be clicked if the emai…

[lastshogun13]

Reorganized drawer footer layout to fix email display issue when email address is long by moving email to the right side and adjusting element positioning.

Key Changes:

• Moved email display from left to right side of drawer footer
• Repositioned settings gear icon to leftmost position
• Moved statistics chart icon to center-left position
• Changed email font size from text-sm to text-xs for better space efficiency
• Repositioned grow div to push email to the far right

Impact on existing users:

• UI improvement: Resolves layout issues when email address is long
• Non-breaking change: All functionality remains the same, only visual positioning changed
• Better space utilization: Email no longer causes layout overflow or truncation

Description of Changes

Please explain the changes in detail.
If there is any impact on existing users (compatibility, degradation, breaking changes, etc.), be sure to include it in the explanation.

Checklist

• Modified relevant documentation
• Verified operation in local environment
• Executed npm run cdk:test and if there are snapshot differences, execute npm run cdk:test:update-snapshot to update snapshots

Related Issues

Please list related issues as much as possible.

• メールアドレスが長いと歯車ボタンがクリックできない #1173

before

after

[tbrand]

How about truncate the email if it exceeds the width? Like bbbbbbbbbbbbbbb@aaaaaaaa.com to bbbbbbbbbbbbbb...

[lastshogun13]

Modify the program to truncate at 23 bytes

[tbrand]

Could revert the position of icons?

[lastshogun13]

reverted icon position

[tbrand]

Could you use truncate class in tailwind?
https://tailwindcss.com/docs/text-overflow

[lastshogun13]

use truncate class in tailwind

[tbrand]

LGTM!!! Thanks.