Zero fix: Unnecessary target="_blank" on internal links in footer

Description

Please provide a clear description of your changes.

This PR fixes the behavior of footer links that were opening internal pages (like “About”) in a new tab because of target="_blank", Also the page has a 🔙back button so the website is unnecessary running on two tabs.

Changes:

-Removed target="_blank" by "_self" from internal footer links so they open in the same tab. -Added a missing back button to the /contribution page for consistent navigation.

Type of Change

Please delete options that are not relevant.

[ ] 🐛 Bug fix (non-breaking change which fixes an issue)
[ ] ✨ New feature (non-breaking change which adds functionality)
[ ] 💥 Breaking change (fix or feature with breaking changes)
[ ] 📝 Documentation update
[ ] 🎨 UI/UX improvement
[ ] 🔒 Security enhancement
[x] ⚡ Performance improvement

Areas Affected

Please check all that apply:

[ ] Email Integration (Gmail, IMAP, etc.)
[x] User Interface/Experience
[ ] Authentication/Authorization
[ ] Data Storage/Management
[ ] API Endpoints
[ ] Documentation
[ ] Testing Infrastructure
[ ] Development Workflow
[ ] Deployment/Infrastructure

Testing Done

Describe the tests you've done:

[ ] Unit tests added/updated
[ ] Integration tests added/updated
[ ] Manual testing performed
[ ] Cross-browser testing (if UI changes)
[ ] Mobile responsiveness verified (if UI changes)

Security Considerations

For changes involving data or authentication:

[ ] No sensitive data is exposed
[ ] Authentication checks are in place
[ ] Input validation is implemented
[ ] Rate limiting is considered (if applicable)

Checklist

[x] I have read the CONTRIBUTING document
[x] My code follows the project's style guidelines
[x] I have performed a self-review of my code
[x] I have commented my code, particularly in complex areas
[ ] I have updated the documentation
[x] My changes generate no new warnings
[ ] I have added tests that prove my fix/feature works
[ ] All tests pass locally
[ ] Any dependent changes are merged and published

Additional Notes

Add any other context about the pull request here.

Screenshots/Recordings

Add screenshots or recordings here if applicable.

Added `🔙back` button on /contributors page, made the page open in the same tab.

Screenshot 2025-06-26 100959

By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.

Jun 25 '25 21:06 dipanshurdev

Walkthrough

This update introduces a "Back" button with an arrow icon to the contributors page, positioned absolutely for responsive layouts. Supporting imports are added, and minor CSS class order changes are made for margin utilities. In the footer component, React is explicitly imported, utility class orders are adjusted, and link target attributes are modified.

Changes

File(s)	Change Summary
apps/mail/app/(full-width)/contributors.tsx	Added a "Back" button with arrow icon, adjusted container positioning, updated margin class order, and added necessary imports.
apps/mail/components/home/footer.tsx	Explicitly imported React, reordered utility CSS classes, swapped margin class order, and changed link targets from `_blank` to `_self`.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ContributorsPage
    participant Router

    User->>ContributorsPage: Visit contributors page
    ContributorsPage->>User: Display contributors content
    User->>ContributorsPage: Click "Back" button
    ContributorsPage->>Router: Navigate to "/"
    Router->>User: Show homepage

Possibly related PRs

Mail-0/Zero#1239: Adjusts the positioning of "Back" buttons on Privacy and Terms pages, similar to the new button placement in this PR.
Mail-0/Zero#1433: Modifies styling and absolute placement of "Back" buttons in full-width app pages, aligning with this PR’s UI changes.
Mail-0/Zero#408: Adds navigation links and updates styling on the contributors page, directly related to this PR’s improvements.

Suggested reviewers

ahmetskilinc

Poem

A button with an arrow, set just right,
Guides users home, from day to night.
Margins swapped and classes neat,
The contributors page feels more complete.
With every hop and tidy tweak,
This rabbit’s code is at its peak! 🐇✨

📜 Recent review details

Configuration used: CodeRabbit UI Review profile: CHILL Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8108b4c328f91b56afcab39c35d809771e498981 and 07e338d0e1bf6d67ade015ee255b23957bd9dc9c.

📒 Files selected for processing (2)

apps/mail/app/(full-width)/contributors.tsx (4 hunks)
apps/mail/components/home/footer.tsx (6 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

apps/mail/app/(full-width)/contributors.tsx (2)

apps/mail/components/navigation.tsx (1)

Navigation (84-281)

apps/mail/components/icons/icons.tsx (1)

ArrowLeft (542-559)

🔇 Additional comments (7)

apps/mail/components/home/footer.tsx (3)

6-6: Explicit React import added for consistency.

This change aligns with the consistent approach across components in this PR. While not technically required with modern JSX Transform, it maintains coding standards.

65-65: CSS class ordering standardized.

These reorderings improve code consistency without affecting functionality or visual output.

Also applies to: 84-84, 108-108, 125-125, 131-131, 192-192, 203-203, 209-209, 217-217, 224-224

181-181: Excellent fix for internal link navigation!

Changing target="_blank" to target="_self" for internal links (/contributors and /about) directly addresses the PR objectives. This prevents unnecessary new tab creation and improves user navigation flow since the site provides back button functionality.

Also applies to: 186-186

apps/mail/app/(full-width)/contributors.tsx (4)

11-11: Proper imports added for new back button feature.

The ArrowLeft import is necessary for the back button icon, and the explicit React import maintains consistency with other components in this PR.

Also applies to: 33-33

377-377: Positioning context established for absolute positioning.

Adding relative positioning to the container is necessary to establish a proper positioning context for the absolutely positioned back button.

380-391: Well-implemented back button addresses PR objectives.

The back button implementation is excellent:

Uses semantic anchor tag for proper accessibility

Responsive positioning (top-right on mobile, top-left on medium+ screens)

Appropriate ghost styling that doesn't compete with main content

Clear navigation affordance with ArrowLeft icon and "Back" text

Links to root path, which is logical for a contributors page

This directly addresses the PR objective of maintaining consistent navigation across the site.

1026-1026: CSS class ordering standardized.

Minor reordering maintains consistency with other styling changes in this PR without affecting functionality.

✨ Finishing Touches

[ ] 📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

Jun 25 '25 21:06 coderabbitai[bot]

Please post screenshots of the styling changes you made

Jun 26 '25 02:06 MrgSub

Please post screenshots of the styling changes you made

Added `🔙back` button on /contributors page, made the "About" and "Contributors" page open in the same tab by simply adding `_self` target in the link.

Used the same button available on the /about page.

Contributors page

Screenshot 2025-06-26 100959

Jun 26 '25 04:06 dipanshurdev

fix: Unnecessary target="_blank" on internal links in footer

Description

Type of Change

Areas Affected

Testing Done

Security Considerations

Checklist

Additional Notes

Screenshots/Recordings

Added 🔙back button on /contributors page, made the page open in the same tab.

Walkthrough

Changes

Sequence Diagram(s)

Possibly related PRs

Suggested reviewers

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Added 🔙back button on /contributors page, made the "About" and "Contributors" page open in the same tab by simply adding _self target in the link.

Used the same button available on the /about page.

Contributors page

Added `🔙back` button on /contributors page, made the page open in the same tab.

CodeRabbit Configuration File (`.coderabbit.yaml`)

Added `🔙back` button on /contributors page, made the "About" and "Contributors" page open in the same tab by simply adding `_self` target in the link.