[Bug]: Nested <button> elements cause hydration error in dashboard/profile pages

[prasangeet]

Short summary

Rendering the profile/dashboard pages triggers a React hydration error because a element is rendered inside another . This violates HTML semantics and causes hydration warnings/errors in Next.js.

Steps to reproduce

1. Navigate to Dashboard → Profile
2. Locate the Logout button implementation
3. LogoutButton wraps a Button component while also rendering a native

This creates nested

elements

React/Next.js throws a hydration error

Expected behavior

The Profile page should render without hydration errors, and the Logout button should not render nested

elements.

Actual behavior

React/Next.js reports:

In HTML,

cannot be a descendant of .
This will cause a hydration error.

The LogoutButton component renders a native

that wraps a Button component, resulting in invalid HTML.

Affected area

Dashboard

Environment

Browser: Brave
OS: EndeavourOS
Environment: Local development
Next.js: 15.5.18
Database: MongoDB (local)

Screenshots, logs, or recordings

Confirmation

• I searched existing issues before opening this report.
• I included enough detail for reproduction.

[github-actions]

👋 Thanks for opening an issue, @prasangeet!

Our maintainers will review this issue shortly 🚀

---

📘 Before Contributing

Please read the contribution guide carefully before requesting assignment:

👉 https://github.com/piyushdotcomm/Editron/blob/main/CONTRIBUTING.md

---

🏷️ NSoC'26 / GSSoC'26 Requirement

Please clearly mention whether you are contributing via:

• NSoC'26
• GSSoC'26
• or as a regular contributor

Example: I am contributing under GSSoC'26

⚠️ Assignment requests without this information may be rejected automatically.

---

⏳ GSSoC Assignment Restriction

GSSoC contributors will only be allowed to take issue assignments after:

🗓️ May 15th, 12:00 AM IST

Before that date, assignment requests from GSSoC contributors will be automatically blocked.

---

🤖 Assignment System

To request assignment, comment: /assign or assign me

The smart assignment workflow validates:

• contributor eligibility
• NSoC/GSSoC participation mention
• active issue assignment limits
• repository contribution rules

---

⚠️ Important Repository Rules

• Do not start working before assignment
• Maximum 3 active assigned issues per contributor
• Contributors are encouraged to combine related fixes into 1–2 quality PRs instead of many small PRs
• PRs without assignment may be closed
• Spam or low-quality PRs may be rejected

Happy contributing 🎉

[prasangeet]

I am contributing under GSSoC'26
assign me this issue

[prasangeet]

/assign gssoc

[github-actions]

✅ Assigned @prasangeet

🏷️ Program: gssoc26

📌 You now have 1 active assignment(s).
Please work on meaningful contributions and avoid opening many tiny PRs.

🏷️ Auto-detected difficulty: level:intermediate. A maintainer may update this.

[github-actions]

⚠️ Auto-unassigned @prasangeet due to inactivity.

Per the contribution guidelines, assigned contributors are expected to show progress within 3 days.

You may re-request assignment later if you intend to continue working on this issue.

[prathik-05]

/assign gssoc

[github-actions]

✅ Assigned @prathik-05

🏷️ Program: gssoc26

📌 You now have 2 active assignment(s).
Please work on meaningful contributions and avoid opening many tiny PRs.