[PR #788] [MERGED] feat: improve mailbox UI spacing and email display #765

New issue

Closed

opened 2026-02-26 21:32:52 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 21:32:52 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/dreamhunter2333/cloudflare_temp_email/pull/788
Author: @dreamhunter2333
Created: 12/15/2025
Status: ✅ Merged
Merged: 12/15/2025
Merged by: @dreamhunter2333

Base: main ← Head: feature/email

📝 Commits (1)

647f71e feat: improve mailbox UI spacing and email display

📊 Changes

1 file changed (+7 additions, -3 deletions)

View changed files

📝 frontend/src/components/MailBox.vue (+7 -3)

📄 Description

User description

Summary

Add bottom margin for mobile filter input to improve visual spacing
Add ellipsis for long email addresses in mobile mailbox view
Maintain consistency with desktop view styling

Changes

Filter Input Spacing: Added 10px bottom margin to mobile filter input container for better separation from mail list
Email Address Display: Wrapped email addresses (FROM/TO) in mobile view with n-ellipsis component (max-width: 240px) to prevent overflow and maintain clean layout
Keep consistent with desktop view which already had ellipsis support

Test Plan

Test on mobile view with long email addresses
Verify filter input spacing looks good
Check ellipsis shows on hover/tap
Ensure consistent behavior between mobile and desktop views

🤖 Generated with Claude Code

PR Type

Enhancement

Description

Added bottom margin to mobile filter input for better spacing.
Wrapped email addresses in n-ellipsis to prevent overflow.
Ensured consistent styling between mobile and desktop views.

Changes walkthrough 📝

Relevant files

Enhancement

MailBox.vue

Enhanced mobile UI spacing and email display handling

frontend/src/components/MailBox.vue

Added a 10px bottom margin to the mobile filter input container.

Wrapped email addresses (FROM/TO) in n-ellipsis with a max-width of
240px.

Improved visual spacing and prevented email address overflow.

+7/-3

Need help?
Type /help how to ... in the comments thread for any questions about PR-Agent usage.
Check out the documentation for more information.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/dreamhunter2333/cloudflare_temp_email/pull/788 **Author:** [@dreamhunter2333](https://github.com/dreamhunter2333) **Created:** 12/15/2025 **Status:** ✅ Merged **Merged:** 12/15/2025 **Merged by:** [@dreamhunter2333](https://github.com/dreamhunter2333) **Base:** `main` ← **Head:** `feature/email` --- ### 📝 Commits (1) - [`647f71e`](https://github.com/dreamhunter2333/cloudflare_temp_email/commit/647f71e54ed635cfcef89977abb3a60ea3e8c929) feat: improve mailbox UI spacing and email display ### 📊 Changes **1 file changed** (+7 additions, -3 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/components/MailBox.vue` (+7 -3) </details> ### 📄 Description ### **User description** ## Summary - Add bottom margin for mobile filter input to improve visual spacing - Add ellipsis for long email addresses in mobile mailbox view - Maintain consistency with desktop view styling ## Changes - **Filter Input Spacing**: Added 10px bottom margin to mobile filter input container for better separation from mail list - **Email Address Display**: Wrapped email addresses (FROM/TO) in mobile view with `n-ellipsis` component (max-width: 240px) to prevent overflow and maintain clean layout - Keep consistent with desktop view which already had ellipsis support ## Test Plan - [x] Test on mobile view with long email addresses - [x] Verify filter input spacing looks good - [x] Check ellipsis shows on hover/tap - [x] Ensure consistent behavior between mobile and desktop views 🤖 Generated with [Claude Code](https://claude.ai/code) ___ ### **PR Type** Enhancement ___ ### **Description** - Added bottom margin to mobile filter input for better spacing. - Wrapped email addresses in `n-ellipsis` to prevent overflow. - Ensured consistent styling between mobile and desktop views. ___ ### **Changes walkthrough** 📝 <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table> <tr> <td> <details> <summary><strong>MailBox.vue</strong><dd><code>Enhanced mobile UI spacing and email display handling</code>        </dd></summary> <hr> frontend/src/components/MailBox.vue <li>Added a 10px bottom margin to the mobile filter input container.<br> <li> Wrapped email addresses (FROM/TO) in <code>n-ellipsis</code> with a max-width of <br>240px.<br> <li> Improved visual spacing and prevented email address overflow. </details> </td> <td><a href="https://github.com/dreamhunter2333/cloudflare_temp_email/pull/788/files#diff-ce7b47744c9011a27a8297d8e5095ccb9609a6849a9afe1a37e04ae47b2636f2">+7/-3</a>      </td> </tr> </table></td></tr></tr></tbody></table> ___ > <details> <summary> Need help?</summary><li>Type <code>/help how to ...</code> in the comments thread for any questions about PR-Agent usage.</li><li>Check out the <a href="https://qodo-merge-docs.qodo.ai/usage-guide/">documentation</a> for more information.</li></details> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>